@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family:'poppins',san-serif;
    list-style-type: none;
    /* text-decoration: none; */
}

:root{
/* --primary:#F8F9FA; */
        --primary:#18C139;
    --secondary:#ffffff;
     /* --secondary:red; */
    --tertiary:#FEEFEF;
     --tertiary:#18C139;
    --text-light:#e6e5f5;
    /* --sidebar:#1A2437; */
     --sidebar:#18C139;
         --sidebar:#18C139;
    --grey:rgb(97, 95, 95);
    --grey-light:rgba(0, 0, 0, 0.032);
    --btn:#18C139;
    --text: #18C139;
    --text2:#18C139;
    --text3:#18C139;
    --fade2:#818184;
    --fade3:#464647;
    --fade4:#c4c2c2;
    --red:#E61601;
    --white:#fff;


    --hover:#EBE4ff;
    --dark-gray:#494848;
}




.Ajax_Div{
    text-align: center;
    color: green;
    margin-top: -10px;
}



.success-msg{
    position: fixed;
    top: 0;
    right: 0;
    text-align: center;
    padding: 15px 10px;
    margin: 10px;
    width: 200px;
    background: rgb(3, 107, 3);
    border-radius: 10px;
    color: #fff;
    font-size: 17px;
    z-index: 999999999999999999999999999999999999999;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
 }

.error-msg{
    position: fixed;
    top: 0;
    right: 0;
    text-align: center;
    padding: 15px 10px;
    margin: 10px;
    width: 200px;
    background: #D2023C;
    border-radius: 10px;
    color: #fff;
    font-size: 17px;
    z-index: 9999999999999999999999999999999999999999999999999999999999999999999;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
 }

 /* -------ajax error--------- */
#messagedisplay{
    position: fixed;
    top: 0;
    right: 0;
    text-align: center;
    padding: 15px 10px;
    margin: 10px;
    width: 200px;
    border-radius: 10px;
    font-size: 17px;
    z-index: 999999999999999999999999999999999999999;
    /* box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); */
 }





.btn{
    padding: 10px 40px;
    border-radius: 5px;
    font-size: 18px;
    outline: none;
    border: none;
    background: var(--btn);
    color: var(--white);
 }

/* =====================================general============================ */

 .g-heading{
    display: flex;
    justify-content: space-between;
    color: var(--white);
    padding: 5px 20px;
    font-size: 20px;
}
#load-deliv{

    /* background-color:rgba(0, 0, 0, 0.425); */
    /* height: 100vh; */
} 
#load-deliv .loader-st-con{
    display: flex;
    justify-content: center;
    height: 100vh;
    background-color:rgba(0, 0, 0, 0.6);
} 
#load-deliv .loader-st-con img{
    margin-top: 150px;
    width: 50px;
    height: 50px;
} 

#body{
    margin: 0px;
    background: var(--primary);
    /* background: red; */
}
body{
    margin: 0px;
    background: var(--primary);
    /* background: red; */
}



/* -----------------------------------------------top-container-------------------------------------------- */
.top-container{
    position: sticky;
    top: 0;
    /* border: 2px solid red; */
    /* margin: 0 7%; */
}

.top-flex{
    display: flex;
    justify-content: space-between;
    padding: 4px 10px;
}
.top-flex .item-1{
    margin-left: 10%;
    margin-right: -10%;
}
.top-flex .item-1 a{
    display: flex;
    align-items: center;
    text-decoration: none;
}
.top-flex .item-1 a >div{
    /* border: 2px solid orange; */
}
.top-flex .item-1 a div:nth-child(1){
    width: 25px;
    height: 25px;
    border-radius: 100%;
    border: 2px solid var(--btn);
    margin-right: 3px;
}
.top-flex .item-1 a div:nth-child(1) img{
    padding: 6px;
    width: 100%;
    height: 100%;
}


.top-flex .item-1 a div:nth-child(2){
    color: var(--btn);
    font-size: 15px;
    font-weight: 500;
    word-spacing: -2px;
}
.top-flex .item-2{
    display: flex;
    align-items: center;
}

.top-flex .item-2 a{
    display: flex;
    align-items: center;
    padding: 0 10px;
    text-decoration: none;
    color: gray;
    font-size: 10px;
    /* border: 2px solid red; */
}
.top-flex .item-2 .logo{
    color: var(--btn);
    font-size: 16px;
}
.top-flex .item-2 .logo-img{
    width: 10px;
    height: 10px;
    margin-top: -5px;
    margin-left: 2px;
}
.top-flex .item-2 .logo-img img{
    width: 100%;
    height: 100%;
}

.top-flex .item-2 .imgx{
    width: 15px;
    height: 15px;
}
.top-flex .item-2 .imgx img{
    width: 100%;
    height: 100%;
}







/* --------------------------------------------------------header-container--------------------------------------------- */
.header-container{
    /* border: 4px solid red; */
    position: sticky;
    top: 0;
    z-index: 9999999999999999999999;
}
.header-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--white);
    padding: 10px 35px;
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1);
}
.header-flex img{
    width: 25px;
    height: 25px;
}
.header-flex >div{
    /* border: 2px solid orange; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.header-flex .item-1 >div{
    display: flex;
    justify-content: center;
    align-items: center; 
}
.menu-container{
    /* border: 2px solid red; */

    /* display: flex;
    justify-content: center;
    align-items: center; */
    width: 50px;
    height: 40px;
    margin-top: 10px;
    /* margin-right: 20px; */
    /* display: none; */
}
#cancel{
    display: none;
}
.dash-cancel{
    display: flex;
    justify-content: flex-end;
    font-size: 18px;
    color: orangered;
    font-weight: 800;
    margin: 10px;
    margin-right: 20px;
    /* border: 2px solid green; */
    margin-top: -15px;
}
#menu{
    z-index: 999999999999;
    position: fixed;
    display: none;
}

.menu{
    /* position: fixed; */
    /* margin-right: 40px; */
    /* margin-left: 20px; */
    /* display:none; */
}
.menu-container #cancel{
    /* border: 2px solid red; */
  
}
.menu-container img{
    width: 30px;
    height: 30px
}
.cancel{
    /* display: none; */
    /* margin-right: -1px; */
    /* position: ; */
    margin-right: 30px;
    color: var(--red);
    font-size: 20px;
    font-weight: bold;
}

.dashboard-view{
    text-decoration: none;
}
.header-flex .item-1 .logo{
    width: 70px;
    height: 40px;
}
.header-flex .item-1 a{
    text-decoration: none;
    color: var(--dark);
    font-size: 35px;
    font-weight: bold;
}
.header-flex .item-2{
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid gray;
    border-radius: 4px;
    width: 45%;
    padding: 0 10px;
}
.header-flex .item-2 img{
    width: 18px;
    height: 18px;
}
.header-flex .item-4 button{
   padding: 10px 40px;
   border-radius: 5px;
   font-size: 18px;
   outline: none;
   border: none;
   background: var(--btn);
   color: var(--white);
}
.header-flex .item-2 input{
    width: 100%;
    padding: 7px 10px;
    font-size: 10px;
    outline: none;
    border: none;
  
}


.header-flex .item-3{
    display: flex;
    justify-content: center;
    align-items: center;
}
.header-flex .arrow{
    width: 20px;
    height: 20px;
    transform: rotate(90deg);
    margin-left: 5px;
}
.item-3 .profile{
    border-radius: 10px;
}
.item-3 .profile>div{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.item-3 .profile:hover {
    background: var(--primary);
}
.item-3 .profile:hover>#drop-profile{
    display: block;
    margin-left: -100px;
}
.drop-down{
    position: absolute;
    box-shadow: 1px 2px 2px 2px rgba(0, 0, 0, 0.2);
    padding: 10px;
    width: 170px;
    /* margin-top: 20px; */
    padding-top: 20px;
    background: var(--white);
    /* border: 2px solid red; */
}
.drop-down a{
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--dark);
}
.drop-down a:hover{
    color: var(--btn);
}

.drop-down a .btn{
    color: var(--white);
    box-shadow: 1px 2px 2px 2px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.drop-down  .border-top{
    border-top: 1px solid rgba(0, 0, 0, 0.3);
}
.drop-down div{
    /* text-decoration: none; */
    /* color: var(--red); */
}
#drop-profile{
    display: none;
}




.item-3 .help >div{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
    cursor: pointer;
}
#drop-help{
    display: none;
}
.item-3 .help:hover {
    background: var(--primary);
}
.item-3 .help:hover>#drop-help{
    display: block;
}




.item-3 .cart >div{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /* border: 2px solid red; */
}
#drop-cart{
    display: none;
}
.item-3 .cart:hover {
    background: var(--primary);
}
.item-3 .cart:hover>#drop-cart{
    display: block;
    /* border: 2px solid red; */
    margin-left: -100px;
}
.item-3 .cart_span{
    color: var(--btn);
    font-size: 20px;
    margin-left: 3px;
    /* margin-bottom: -60px; */
}





.search-box-container{
    border: 1px solid gray;
    margin: 5px 10px;
    padding: 0 10px;
    border-radius: 5px;
    display: none;
}
.search-box-flex{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    padding: 5px 0;
    margin: 0 10px;
    margin-top: 5px ;
    background: var(--white);
}
.search-flex-box i{
    color: rgb(95, 95, 95);
   
}
.search-flex-box input{
    width: 90%;
    font-size: 12px;
    padding: 13px 10px;
    outline: none;
    border: none;
    background: var(--transparent);
   
}
.search-flex-box img{
    width: 20px;
    height: 20px;
}


.record-flex{
    display: flex;
    justify-content: center;
    /* border: 2px solid red; */
    margin-top: 100px;
}
.record-flex img{
   width: 40%;
}
.record-container .p-1{
   text-align: center;
   color: orangered;
   margin-top: 10px;
 }

/* -----------------------------------------------sidebar--------------------------------- */
.sidebar{
    position: fixed;
    /* position: absolute; */
    /* z-index: 2; */
    /* left: -280px; */
    top: 0;
    left: 0;
    width: 210px;
    padding-top: 70px;
    /* width: 80%; */
    height: 100vh;
    overflow-x: auto;
    background: var(--white);
    transition: all .5s ease;
    /* border-radius: 10px; */
    /* margin-bottom: 500px; */
    /* margin-left: 50px; */
    z-index: 99999999999999999999999999999999999999999;
    /* border: 2px solid #bcaceb; */
    border: 3px solid red;
}

.sidebar header{
    font-size: 22px;
    padding: 7px 10px;
  
    color: var(--red);
    /* background: var(--white); */
    text-align: center;
    line-height: 70px;
    background: var(--white);
    user-select: none;
    /* border: 2px solid red; */
    /* padding-top: 100px; */
}
.sidebar header span{
    color: red;
    margin-left: 50px;
    font-weight: bold;
}
.sidebar ul{
    padding-top: 12px;
}
.sidebar ul a{
    display: block;
    height: 100%;
    width: 100%;
    line-height: 25px;
    font-size: 14px;
    color: var(--fade-white);
    padding-left: 15px;
    box-sizing: border-box;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* border-bottom: 1px solid black; */
    transition: .4s;
    text-decoration: none;
}
.sidebar ul a:hover{
    padding-left: 35px;
    color: var(--btn);
}
.sidebar ul a i{
    margin-right: 16px;
    color: var(--btn);
}





/* -----------------------------------------------sidebarxx--------------------------------- */
.sidebarxx{
    position: fixed;
    z-index: 2;
    /* left: -280px; */
    /* top: 70px; */
    top: 0;
    left: 0;
    width: 250px;
    height: 100vh;
    overflow-x: auto;
    /* background: var(--white); */
    background: var(--btn);
    transition: all .5s ease;
    padding-top: 30px;
    /* border: 1px solid var(--fade); */
    border-top-color: transparent;
}
.active{
    /* left: 0px; */
}
#cancel{
    /* display: none; */
}
.sidebarxx header{
    /* font-size: 22px;
    padding: 7px 10px;
    color: var(--primary);
    text-align: center;
    line-height: 70px;
    background: var(--white);
    user-select: none;
    border: 3px solid rgb(112, 8, 8); */
}
.sidebarxx header span{
    color: red;
    margin-left: 50px;
    font-weight: bold;
}
.sidebarxx ul a{
    display: block;
    height: 100%;
    width: 90%;
    line-height: 45px;
    font-size: 14px;
    /* color: var(--dark-gray); */
    color: var(--white);
    padding-left: 20px;
    padding-right: 10px;
    box-sizing: border-box;
    /* border-top: 1px solid rgba(255, 255, 255, 0.1); */
    /* border-bottom: 1px solid black; */
    transition: .4s;
    border-radius: 0px 50px 50px 0px;
    text-decoration: none;
    /* border: 2px solid red; */
}
#sidebar-active{
    /* background: var(--hover); */
    /* color: var(--text2); */
}
.sidebarxx ul a:hover{
    padding-left: 40px;
    background: var(--hover);
    color: var(--btn);
}
.sidebarxx ul a i{
    margin-right: 16px;
}


.passport-container{
    display: flex;
    justify-content: center;
}
.passport{
    margin: 20px 0px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /* border: 2px solid red; */
}
.passport img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
















/* -----------------------------------------------sidebar--------------------------------- */
.sidebar-ads{
    /* position: fixed; */
    position: absolute;
    /* z-index: 2; */
    /* left: -280px; */
    top: 157px;
    right: 0;
    width: 210px;
    /* width: 80%; */
    height: 400px;
    overflow-x: auto;
    /* background: var(--white); */
    transition: all .5s ease;
    border-radius: 10px;
    margin-right: 50px;
    /* border: 3px solid red; */
}
.sidebar-ads >div{
    border: 2px solid red;
    width: 100%;
    height: 47%;
    border-radius: 10px;
    margin-top: 9px;
}
.sidebar-ads >div img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
























/* -----------------------------------------main-container-------------------------------------- */
.main-container{
    margin: 15px 15px 20px 220px;
    /* padding: 40px 30px 40px 30px; */
    /* background-color: var(--dark-light); */
    /* border: 5px solid red; */
    border-radius: 10px;
}
.main-container .main-flex{
       display: flex;
       justify-content:center;
       align-items: center;
       /* border-radius: 10px; */
       /* padding: 30px 0; */
       /* margin: 10px; */
       /* border: 7px solid rgb(43, 0, 255); */
       margin-bottom: 20px;
       background: var(--transparent);
       
       /* box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3); */
                 /* 0px 3px 10px 0px rgba(0, 0, 0, 0.4); */
}

.main-container .main-flex .item{
    border-radius: 10px;
    background: var(--white);
    width: 100%;
    /* border: 2px solid red; */
    height: 400px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3);
    /* border: 4px solid red; */
    /* background: red; */
}
.main-flex  .item img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}








/* ===========================  pppppppppppppppppppppppp =====text-container=============================== */
.text-container{

}
.text-flex{
    display: flex;
    justify-content: center;
}
.text-flex .item{
    width: 440px;
    border-radius: 4px;
    background: var(--secondary);
    box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.2);
    padding: 30px 20px;
    margin: 10px 50px;
}
.text-flex .item .unit-1{
    text-align: center;
}
.text-flex .item .unit-1 img{
    width: 70px;
}
.text-flex .item .unit-2{
    text-align: center;
    margin-top: 15px;
}
.text-flex .item .unit-2 .t-1{
    font-weight: bold;
    color: var(--text2);
    font-size: 25px;
}
.text-flex .item .unit-2 .t-2{
    color: var(--text);
    font-size: 16px;
    margin-top: 7px;
}
.text-flex .item .unit-3{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 15px;
}
.text-flex .item .unit-3 .box{
    width: 150px;
    border: 1px solid rgb(218, 218, 218);
    border-radius: 5px;
    text-align: center;
    padding: 5px;
    margin: 5px;
}
.text-flex .item .unit-3 .box:hover{
    background: rgba(0, 0, 0, 0.01);
}
.text-flex .item .unit-3 .box img{
    width: 18px;
    margin-top: 5px;
}
.text-flex .item .unit-4 {
    /* margin: 0 100px; */
    margin-top: 25px;
    border-bottom: 1px solid rgb(229, 229, 229);

}
.text-flex .item .unit-4c {
    display: flex;
    justify-content: center;
}
.text-flex .item .unit-4c div{
    display: flex;
    justify-content: center;
    background:var(--secondary);
    padding: 0 5px;
    margin-top: -13px;
    color: var(--text);
    /* widows: 40px; */
}
.text-flex .item .unit-5{
    margin-top: 40px;
}
.input-div{
    border: 1px solid rgb(192, 191, 191);
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 0 5px;
}

.text-flex .item .unit-5 .inp-title{
    color: var(--text);
    font-size: 12;
    margin-bottom: -18px;
 }
.input-div input{
    width: 95%;
    font-size: 15px;
    padding: 10px 5px;
    outline: none;
    border: transparent;
    color: rgb(105, 105, 105);
}
.input-div select{
    width: 95%;
    font-size: 15px;
    padding: 10px 5px;
    outline: none;
    border: transparent;
    color: rgb(105, 105, 105);
}
.input-div i{
    color: var(--text2);
}
#eye-closex{
    display: none;
}
.text-flex .item .unit-6{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.text-flex .item .unit-6 div{
    display: flex;
    align-items: center;
}
.text-flex .item .unit-6 div .rm{
    margin-left: 5px;
    font-size: 12px;
    color: var(--text);
}
.text-flex .item .unit-6 a{
    text-decoration: none;
    color: var(--text);
    font-weight: bold;
    font-size: 14px;
    /* border-bottom: 1px solid var(--btn); */
}
.text-flex .item .unit-7{
    margin-top: 30px;
    text-align: center;
}
.text-flex .item .unit-7 button{
    width: 100%;
    outline: none;
    border: none;
    background: var(--btn);
    border-radius: 5px;
    color: #fff;
    padding: 10px;
}
.text-flex .item .unit-7 button:hover{
    background: var(--text2);
}
.text-flex .item .unit-8{
    text-align: center;
    margin-top: 20px;
    color: var(--text);
    font-size: 13px;
}
.text-flex .item .unit-8 a{
    text-decoration: none;
    font-weight: bold;
    color: var(--text);

}

.resent-otp{
    color: green;
    outline: none;
    border: none;
    font-size: 14px;
    font-weight: bold;
    border: none;
    background-color: transparent;
    cursor: pointer;
}
.resent-otp:hover{
    color: rgb(1, 75, 1);
}








/* ----------------------------------settings----------------------- */
.settings-container{
    /* border: 2px solid red; */
}
.head-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* border: 2px solid red;  */
}
.head-flex .heading-big h3{
    color: var(--ash);
   font-size: 25px;
   margin-bottom: 5px;
   
   /* text-align: left; */
}
.setting-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid gray;
    border-radius: 7px;
    margin-top: 15px;
    padding: 10px;
    text-decoration: none;
    color: var(--ash);
    /* border: 2px solid red; */
}
.setting-item .settings-arrow{
    /* border: 2px solid red; */
}
.setting-item >div img{
    width: 80px;
    height: 80px;
    transform: rotate(180deg);
}
.setting-item .icon-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.setting-item .icon-flex .icon-wrapper-1{
    margin-right: 20px;
}
.setting-item .txt div{
    font-size: 15px;
}
.setting-item .txt p{
    font-size: 10px;
    /* color: rgb(167, 2, 2); */
    font-weight: 200;
}
.setting-item .icon-wrapper-1 i{
   /* color: red; */
   font-size: 20px;
}
.setting-item .icon-wrapper-2 i{
    /* color: red; */
    font-size: 20px;
 }




 .popDIV{
    position: fixed;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100vh;
    transition: all .5s ease;
    margin-bottom: -1000px;
    overflow: auto;
    
 }
 .pop-now{
    margin-bottom: 0;
 }
 .pop-flex{
    display: flex;
    justify-content: center;
 }
 .pop-flex .units{
   width: 500px;
    background-color: var(--btn);
    width: 100%;
    /* height: 100vh; */
    margin-left: 270px;
    border-radius: 30px 30px 0px 0px;
    z-index: 2;
    text-align: center;
    margin-top: 50px;
    background: #fff;
    box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.2);
   

 }
 .pop-close{
    display: flex;
    justify-content: center;
 }
 .pop-close>div{
    border-radius: 50px;
    width: 50px;
    height: 50px;
    background-color: #673DE6;
    color: white;
    font-weight: bold;
    text-align: center;
    padding-top: 18px;
    margin-top: -24px;
    box-shadow: 0px 3px 7px 0px #3a2576;
 }

  .pop-flex .units .item{
    padding: 0 15%;
    /* border: 3px solid red; */
    /* padding-bottom: 300px; */
    /* margin-bottom: 500px; */
    /* overflow: auto; */
  }

   .pop-flex .units .unit-2 .t-1{
    font-weight: bold;
    color: rgb(134, 134, 134);
    font-size: 20px;
    margin-top: 30px;
}
 .pop-flex .units .unit-2 .t-2{
    color: rgb(193, 193, 193);
    font-size: 12px;
    margin-top: 7px;
}

  .pop-flex .units .item .input-container{
    border: 1px solid rgb(192, 191, 191);
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 0 5px;
}
.support-id{
    border: 2px solid var(--btn);
}
.pop-flex .units .item .input-container input{
    width: 95%;
    font-size: 15px;
    padding: 10px 5px;
    outline: none;
    border: transparent;
    color: rgb(105, 105, 105);
}
.pop-flex .units .item .input-container textarea{
    width: 100%;
    font-size: 14px;
    padding: 10px;
    outline: none;
    border: none;
    color: rgb(105, 105, 105);
    background: var(--transparent);
}
.pop-flex .units .unit-6{
   display: flex;
   align-items: center;
}
.pop-flex .units .unit-7{
    margin-top: 30px;
    text-align: center;
}
.pop-flex .units .unit-7 button{
    width: 100%;
    outline: none;
    border: none;
    background: var(--btn);
    border-radius: 5px;
    color: white;
    padding: 15px;
}
.pop-flex .units .unit-7 button:hover{
    transform: scale(0.95);  
    transition: .1s;
}
.sp-flex{
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-flow: row wrap;
    margin-top: 30px;
}
.sp-flex .wrap{
    width: 160px;
    /* height: 80px; */
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 10px;
    padding-bottom: 20px;
    margin: 10px;
    text-decoration: none;
}
.sp-flex .wrap:hover{
    box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.2);
    transform: scale(0.95);  
    transition: .1s;
}

.sp-flex .wrap .txt-1{
    color: var(--btn);
    font-size: 25px;
}
.sp-flex .wrap .txt-2{
    color: gray;
    font-size: 13px;
    margin-top: 10px;
}
.sp-flex .wrap .b-1{
    color: gray;
    font-weight: bold;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 4px;
    font-size: 13px;
    margin-top: 10px;
}
.sp-flex .wrap .b-2{
    color: orangered;
    font-weight: bold;
    /* border: 1px solid rgba(0, 0, 0, 0.2); */
    padding-top: 4px;
    font-size: 13px;
    margin-top: 10px;
    text-align: left;
}
.sp-flex .wrap .b-3{
    color: rgb(171, 171, 171);
    /* font-weight: bold; */
    padding: -2px;
    font-size: 13px;
    text-align: left;
}
.sp-flex .wrap .b-4{
    color: rgb(102, 102, 102);
    font-weight: bold;
    padding: -2px;
    margin-top: 10px;
    padding-top: 10px;
    font-size: 13px;
    text-align: left;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.sp-flex .wrap .b-5{
    color: rgb(144, 144, 144);
    padding: -2px;
    /* margin-top: 10px; */
    /* padding-top: 10px; */
    font-size: 12px;
    text-align: left;
}
.sp-flex .wrap .txt-3 button{
    width: 100%;
    outline: none;
    border: none;
    background: var(--btn);
    border-radius: 5px;
    color: white;
    padding: 5px;
    margin-top: 10px;
}
.sp-flex .wrap .txt-3 button:hover{
    transform: scale(0.95);  
    transition: .1s;
}











/* ----------------------------------slider-container--------------------------- */
.slider-container{
    /* border: 2px solid red; */
    margin-bottom: 50px;
    /* margin: 0 40px; */
    /* margin: auto; */
    display: flex;
    justify-content: center;
}
.slider-inner-container{
    width: 1200px;
    /* border: 3px solid orange; */
    border-radius: 0px 0px 10px 10px;
    
}
.c-valentine{
    background: var(--red);
}
.slider-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap;
    padding: 10px;
    background: var(--white);
    border-radius: 0px 0px 10px 10px;
    
    
    /* margin: 0 12%; */
    /* border: 4px solid goldenrod; */
    
}
.bottom-space{
    padding-bottom: 30px;
}
.slider-inner-container-product .heading{
    background: orange;
}
.slider-flex .item{
    width: 179px;
    height: 180px;
    border-radius: 5px;
    margin: 5px;
    text-decoration: none;
}
.slider-flex .item img{
    width: 100%;
    height: 100%;
    border-radius: 5px;
}
.slider-flex .item{
    width: 179px;
    height: 180px;
    border-radius: 5px;
    margin: 5px;
}










/* ----------------------------------deal-container--------------------------- */
.deal-container{
    /* border: 4px solid red; */
    margin-bottom: 50px;
    /* margin: 0 40px; */
    /* margin: auto; */
    display: flex;
    justify-content: center;
 
}
.general-product-container{
    margin: 20px 10px 30px 280px;
}
.deal-inner-container{
    width: 1500px;
    /* border: 3px solid orange; */
    border-radius: 0px 0px 10px 10px;
    
}

.d-valentine{
    background: var(--btn);
}
.deal-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap;
    padding: 10px;
    background: var(--white);
    border-radius: 0px 0px 10px 10px;   
}
.deal-flex .item{
    width: 179px;
    height: 180px;
    border-radius: 5px;
    margin: 5px;
    text-decoration: none;
    /* border: 1px solid blue; */
    padding: 12px;
    background: var(--primary);
    
}
.deal-flex .item img{
    width: 100%;
    height: 89%;
    border-radius: 10px;
}
.deal-flex .item{
    width: 170px;
    height: 170px;
    border-radius: 5px;
    margin: 5px;
}
.deal-flex .item .caption{
    text-align: center;
    color: rgb(77, 77, 77);
    font-size: 14px;
    margin-top: 0px;
    /* padding-bottom: 10px; */
    /* border: 2px solid red; */
}




.deal-inner-container .deal-deal-cover{
    border: 1px solid var(--white);
    border-radius: 5px;
    margin-top: 10px;
    background-color:var(--white);
}
.deal-inner-container .item-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--fade4);
    border-radius: 5px;
    margin: 13px;
    margin-top: 20px;
    padding: 15px;

}

.deal-inner-container .left-item-1{
    display: flex;
    align-items:end;
    /* padding: 10px; */
}
.deal-inner-container .left-item-1 .pending-image{
    width: 130px;
    height: 130px;
    border-radius: 5px;
}
.deal-inner-container .left-item-1 img{
    width: 100%;
    height: 100%;
    border-radius: 5px;
}
.deal-inner-container .left-item-1 .pending-details{
    /* border: 2px solid red; */
    margin-left: 20px;
 }
 .deal-inner-container .left-item-1 .pending-details p:nth-child(1){
    font-size: 20px;
    color: var(--fade3);
    font-weight: 300;
 }
 .deal-inner-container .left-item-1 .pending-details p:nth-child(2){
    font-size: 19px;
    color: var(--fade2);
    font-weight: 100;
    padding-bottom: 15px;
    padding-top: 6px;
 }
 .deal-inner-container .left-item-1 .pending-details p:nth-child(3){
    background: var(--fade2);
    color: var(--white);
    width: 100px;
    border-radius: 4px;
    padding: 2px;
    text-align: center;
 }
 .deal-inner-container .left-item-1 .pending-details p:nth-child(4){
   color: var(--dark-gray);
   font-size: 17px;
   padding-top: 10px;
 }
 .deal-inner-container .left-item-2 a{
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    color: var(--btn);
}
.deal-inner-container .heading{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px dotted gray;
    /* margin-left: 13px; */
    padding: 5px 10px;
    margin-bottom: 30px
  
}
.deal-inner-container p{
    color:;
    font-weight: bold;
    border-radius: 10px;

  
}
.deal-inner-container .order-heading{
    margin: 16px;
    /* margin-left: 16px; */
    /* background-color: rgba(205, 238, 255, 0.408); */
    /* background: var(--btn); */
    border-radius: 10px;
    padding: 10px;
}
.deal-inner-container .order-heading p:nth-child(1){
    font-size: 20px;
    color: var(--fade3);
    font-weight: 300;
    margin: 10px 0;
}
.deal-inner-container .order-heading .p-1{
    font-size: 16px;
    color: var(--fade2);
    font-weight: 100;
 }

 .deal-inner-container  .left-pending-heading{
    /* border: 1px solid red; */
    /* margin: 10px 0; */
    margin-bottom: 10px;
 }
 .deal-inner-container .left-pending-heading p:nth-child(1){
    background: var(--fade2);
    color: var(--white);
    width: 100%;
    border-radius: 4px;
    padding: 2px;
    text-align: center;
 }
 .deal-inner-container .left-pending-heading p:nth-child(2){
    color: var(--dark-gray);
    font-size: 17px;
    font-weight: 600;
    padding-top: 10px;
 }
 .deal-inner-container .pending-details-top .pending-details p{
    font-size: 16px;
    /* padding-top: 1000px; */
    color: red;
    color: yellow;
 }
 .deal-inner-container  .pending-details-top .pending-details a{
    text-decoration: none;
    font-size: 13px;
   
 }
 .deal-inner-container  .pending-details-top{
    margin-top: 60px;
}
.deal-deal-cover .two-box-container{
    /* border: 2px solid red; */
}
.deal-deal-cover .two-box-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap;
    
}
.deal-deal-cover .two-box-flex .item{
    width: 500px;
    height: 320px;
    border: 1px solid var(--fade4);
    margin: 12px;
    border-radius: 5px;
}
.deal-deal-cover .two-box-flex .content{
    /* border: 2px solid red; */
    padding-bottom: 10px;
    
}
.deal-deal-cover .two-box-flex .content .headx{
    padding: 10px;
    font-size: 20px;
    color: var(--dark);
    border-bottom: 1px solid var(--fade4);
    margin-bottom: 5px;
}
.deal-deal-cover .two-box-flex .content .content-section-2{
    margin-top: 20px;
    /* padding-bottom: 10px; */
    /* border: 2px solid red; */
}
.deal-deal-cover .two-box-flex .content .headxxx{
    padding: 10px;
    font-size: 20px;
    color: var(--dark);
    /* margin-bottom: 5px; */
}
.deal-deal-cover .two-box-flex .content p{
    padding-left: 10px;
    font-size: 16px;
    color: var(--fade2);
    margin-top: 2px;
}







/* ----------------------------------deal-container--------------------------- */
.cart-container{
    /* border: 2px solid red; */
    margin-bottom: 20px;
    /* margin: 0 40px; */
    /* margin: auto; */
    display: flex;
    justify-content: center;
}
.cart-inner-container{
    width: 1200px;
    /* border: 3px solid orange; */
    border-radius: 0px 0px 10px 10px;
    
}
.cart-container .heading-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: green;
}
.cart-container .heading{
    
    color: var(--white);
    padding: 5px 0;
    padding-left: 30px;
    font-size: 22px;
}
.cart-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap;
    padding: 10px;
    background: var(--white);
    border-radius: 0px 0px 10px 10px;

    
}

/* .cart-inner-container-product .heading{
    background: orange;
} */
.cart-flex .item img{
    width: 100%;
    height: 89%;
    border-radius: 10px;
}
.cart-flex .item{
    width: 170px;
    /* height: 170px; */
    text-decoration: none;
    color: var(--dark);
    /* border: 1px solid blue; */
    border-radius: 5px;
    margin: 8px;
    background: var(--white);
}
.cart-flex .item .discount-percent{
    color: var(--red);
    /* position: absolute; */
    margin-left: 130px;
    margin-top: 20px;
    z-index: 1;
}
.cart-flex .item .name{
    color: var(--fade);
    font-size: 14px;
    padding: 4px 0;
}
.cart-flex .item .price{
    /* color: var(--fade); */
    font-size: 16px;
    padding: 3px 0;
}
.cart-flex .item .discount{
    color: var(--fade2);
    font-size: 12px;
}
.cart-flex .item .left-item{
    color: var(--fade3);
    font-size: 12px;
}






/* --------------------------------------------------banner-container--------------------------- */
.banner-container{
    /* border: 2px solid red; */
    margin-bottom: 20px;
    /* background: red; */
}
.banner-flex{
    display: flex;
    justify-content: center;
    align-items: center;
}
.banner-flex .item{
    width: 1200px;
    height: 230px;
    border-radius: 10px;
    margin: 8px;
    /* border: 3px solid blue; */
}
.banner-flex .item img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}











/* --------------------------------------------dashboard-container-------------------------------- */
.dashboard-container{
    /* border: 4px solid red; */
    
    /* margin: 20px 50px; */
    margin-bottom: 20px;
}
.dashboard-flex{
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    /* flex-flow: row wrap; */
}

.dashboard-flex-cart{
    /* display: flex;
    justify-content: flex-start;
    flex-flow: row wrap;
    margin-left: 95px; */
}
.dashboard-flex >div{
    /* border: 2px solid blue; */
    /* width: 400px; */
    /* height: 700px; */
    /* margin: 10px; */
    

}
.dashboard-flex .item-1{
    /* border: 2px solid blue; */
    width: 390px;
    /* width: 40%; */
    /* height: 1200px; */
    /* margin: 10px; */
    background: var(--white);
}

.view-screen-flex{
    /* border: 2px solid red; */
    padding: 10px;
}
.view-screen{
    width: 100%;
    height: 330px;
    border-radius: 5px;
    cursor: pointer;
}
.view-screen img{
    width: 100%;
    height: 100%;
    border-radius: 5px;
}
.view-side-flex{
    display: flex;
    justify-content: center;
    align-items: center;
}
.view-side-flex .item{
    width: 50px;
    height: 50px;   
    margin: 10px; 
    cursor: pointer;
}
.view-side-flex .item img{
    width: 100%;
    height: 100%;
}

.share-heading{
    font-size: 14px;
    color: var(--fade);
}
.share-icon-flex{
    display: flex;
    /* justify-content: center; */
    align-items: center;
}
.share-icon-flex .item{
    width: 30px;
    height: 30px;   
    margin: 5px; 
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid var(--btn);
}





.dashboard-flex .item-2{
    /* border: 2px solid blue; */
    width: 620px;
    /* height: 1200px; */
    padding: 10px;
    border-radius: 0 5px 5px 0;
    background: var(--white);
    margin-left: 10px;
}
.dashboard-flex .item-2-width{
    width: 870px;
}
/* .delivery-container{
    width: 100%;
}
.delivery-container >div{
    width: 100%;
    margin-top: 13px;
    padding: 0px 10px;
}
.delivery-container input{
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid var(--btn);
    outline: none;

}
.delivery-container select{
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid var(--btn);
    outline: none;

} */

.dashboard-flex .customer-address{
    /* border: 4px solid red; */
    border: 1px solid var(--fade4);
    border-radius: 7px;
    padding: 10px;
    margin: 10px;
}
.dashboard-flex .customer-address-top{
    margin-top: 30px;
    border: 1px solid var(--fade4);
    border-radius: 7px;
    padding: 10px;
   
}
.dashboard-flex .delivery-address{

    text-align: center;
    /* color: var(--dark-gray); */
    color: var(--btn);
    font-size: 20px;
    padding-bottom: 5px;
    font-weight: 700;
    border-bottom: 1px solid var(--fade4);


}
.dashboard-flex .customer-address .d-heading-2{
    /* border: 2px solid red; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dashboard-flex .customer-address .d-heading-2 .flex-1{
    display: flex;
    align-items: center;
    margin: 7px 0;
}
.dashboard-flex .customer-address .d-heading-2 .flex-1 input{
    margin-right: 10px;
}
.dashboard-flex .customer-address .d-heading-2 .flex-1 div{
    font-size: 20px;
    /* color: var(--fade); */
    color: var(--btn);
}
.dashboard-flex .customer-address .d-heading-2 .flex-2{
    display: flex;
    align-items: center;
    text-decoration: none;
}
.dashboard-flex .customer-address .d-heading-2 img{
    width: 18px;
    height: 14px;
    margin-left: 10px;
}
.dashboard-flex .customer-address .d-heading-3{
    margin-top: 10px;
    margin-left: 23px;
}
.dashboard-flex .customer-address .d-heading-3 p:nth-child(1){
    font-size: 18px;
    color: var(--fade);
}
.dashboard-flex .customer-address .d-heading-3 p:nth-child(2){
    font-size: 14px;
    color: var(--fade2);
}
.dashboard-flex .customer-address .d-heading-4{
    padding: 10px;
    margin-top: 10px;
    margin-left: 23px;
    border: 1px solid var(--fade4);
    border-radius: 7px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
}
.dashboard-flex .customer-address .d-heading-4:hover{
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1);
    background: rgb(250, 246, 246);
}
.dashboard-flex .customer-address .d-heading-4 .bk-image{
    display: flex;
    align-items: center;
}
.dashboard-flex .customer-address .d-heading-4 .bk-image img{
    width: 30px;
    height: 30px;
    margin-right: 10px;
}
.dashboard-flex .customer-address .d-heading-4 .pp p:nth-child(2){
    color:var(--red);
    padding: 3px 0;
}
.dashboard-flex .customer-address .d-heading-4 .pp p:nth-child(3){
    color:var(--fade2);
    font-size: 14px;
}
.dashboard-flex .customer-address .d-heading-4 #ppaa{
    color: var(--btn);
}
.dashboard-flex .customer-address .d-heading-4 #ppa{
    color: var(--btn);
}
.dashboard-flex .customer-address .pay-mt-container{
    /* border: 1px solid white; */
    background: white;
    border-radius: 10px;
    padding: 10px;
    margin-left: 15px;
    margin-top: 20px;
}
.dashboard-flex .customer-address .pay-mt-container .pay-mt{
    margin-top: 7px;
    font-weight: 600;
    font-size: 12px;
    color: gray;
    cursor: pointer;
    text-decoration: none;
}
.dashboard-flex .customer-address .pay-mt-container .pay-mt:hover{
    color: var(--btn);
}
.dashboard-flex .customer-address .d-heading-4 .flex-2{
    display: flex;
    align-items: center;
    text-decoration: none;
}
.dashboard-flex .customer-address .d-heading-4 img{
    width: 18px;
    height: 14px;
    /* margin-left: 10px; */
}














.item-2-heading-flex{
    display: flex;
    justify-content: space-between;
    align-items:first baseline;
}

.item-2-heading-flex div:nth-child(1){
    font-size: 21px;
    color: var(--fade3);
    padding: 10px 0px;
    line-height: 30px;
    text-transform: capitalize;
    /* border: 3px solid orange; */
}
.item-2-heading-flex div:nth-child(2){
    font-size: 20px;
    margin-left: 100px;
}
.flash-sale-container{
    /* border: 2px solid red; */
    border-radius: 5px;
}
.flash-sale-flex{
    display: flex;
    justify-content: center;
}
.flash-sale-flex .item{
    width: 100%;
    height: 85px;
    border-radius: 0 0 5px 5px;
    border: 1px solid var(--red);
    padding-left: 10px;
}
.flash-sale-container .heading-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background: var(--red); */
    background: var(--btn);
    border-radius: 5px 5px 0 0;
    padding: 2px 10px;
 
}
.flash-sale-flex .item .time-box{
    display: flex;
    align-items: center;
    padding:10px 0;
}
.flash-sale-flex .item .time-box small{
    margin: 0 20px;
    font-size: 16px;
    color: var(--fade2);
}
.flash-sale-flex .item .flash-discount{
    color: var(--red);
}
.flash-sale-flex .item .left-over{
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
}


.heading-container .flash-time-icon{
    color: var(--white);
}
.heading-container .flash-time{
    display: flex;
    align-items: center;
}
.heading-container .flash-time div:nth-child(1){
    margin-right: 10px;
    color: white;
}
.heading-container .flash-time div:nth-child(2){
    color: white;
    font-weight: 700;
}
.cart-description .shipping-flow{
    font-size: 13px;
    padding: 10px 0px;
    color: var(--fade2);
}
.cart-description .shipping-flow span{
    color: var(--dark);
    font-size: 14px;
}
.cart-description .shipping-flow .ship-span{
    font-size: 13px;
    padding: 10px 0px;
    color: var(--fade2);
    text-transform: capitalize;
}
.cart-description .shipping-flow .ship-to{
    font-size: 13px;
    padding: 10px 0px;
    color: var(--fade2);
    text-transform: uppercase;
}
.cart-description .rate{
    display: flex;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--fade2);
}
.cart-description .rate .verified span{
    color: blue;
    font-size: 13px;
    
}
.cart-description  .variation-heading{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--fade);
    padding: 10px 0;
    font-weight: 800;
}
.cart-description  .variation-heading a{
    text-decoration: none;
}
.cart-description .variation-container{
    display: flex;
    align-items: center;
}
.cart-description .variation-container>div{
    width: 35px;
    height: 35px;
    border: 1px solid var(--btn);
    margin-right:10px;
    padding-top: 8px;
    text-align: center;
    color: var(--fade3);
    /* padding-left: 5px; */
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    /* box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4); */
}
.cart-description .variation-container>div:hover{
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
}
.cart-description .cart-btn-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* border: 1px solid red; */
    background: var(--btn);
    border-radius: 5px;
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.6);
    margin: 20px 10px;
}
.cart-description .cart-btn-container img{
    width: 60px;
    height: 30px;
    padding-left: 10px;
}
.cart-description .cart-btn-container button{
    width: 100%;
    height: 40px;
    border: none;
    outline: none;
    color: var(--white);
    font-size: 17px;
    /* font-weight: 800; */
    background: var(--transparent);
    cursor: pointer;
}
.cart-description .promotion-container .promotion-heading{
    font-size: 13px;
    color: var(--fade);
    padding: 10px 0;
    font-weight: 800;
}
.cart-description .promotion-container .item-box{
    display: flex;
    align-items: center;
    margin-top: 5px;
}
.cart-description .promotion-container .item-box a{
    font-size: 14px;
    text-decoration: none;
    color: var(--btn);
}
.cart-description .promotion-container .item-box i{
    font-size: 14px;
    color: var(--btn);
}

.cart-description .promotion-container .item-box img{
    width: 20px;
    height: 20px;
}









.dashboard-flex .item-3{
    width: 300px;
    /* height: 1200px; */
    margin: 10px;
    border-radius: 10px;
    background: var(--white);
    padding: 10px;
}
.delivery-container{
    /* padding:10px; */
}
.delivery-container .delivery-heading{
    /* color: var(--fade3); */
    padding: 10px;
    /* font-weight: 800; */
    border-bottom: 1px solid var(--fade4);
}
.delivery-container .delivery-logo {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    padding-top: 10px;
    /* padding-left: 10px; */
}
.delivery-container .delivery-logo div:nth-child(1){
    font-size: 13px;
    font-weight: 700;
}
.delivery-container .delivery-logo  img{
    width: 8px;
    height: 8px;
    margin: 0 4px;
}
.delivery-container .delivery-logo div:nth-child(3){
    color: var(--btn);
    font-size: 13px;
}
.delivery-container .delivery-content p{
    /* padding-left: 10px; */
    font-size: 13px;
    color: var(--fade2);
    font-weight: 400;
}
.delivery-container .delivery-content{
    /* padding: 0px 10px; */
}
.delivery-container .delivery-content .location-heading{
    color: var(--fade3);
    /* text-align: center; */
    margin-top: 10px;
    padding-bottom: 1px;
    font-size: 16px;
    font-weight: 700;
}
.delivery-container .delivery-content >div select{
    width: 100%;
    height: 40px;
    font-size: 16px;
    margin-top: 20px;
}
.delivery-container .pickup-container{
    display: flex;
    justify-content: center;
    /* align-items: center; */
    padding-top: 10px;
    /* padding-left: 10px; */
}
.delivery-container .pickup-container img{
    width: 28px;
    height: 28px;
}
.delivery-container .pickup-container .p-item{
    margin-left: 20px;
}
.delivery-container .pickup-container p:nth-child(1){
    color: var(--fade3);
    /* text-align: center; */
    padding-bottom: 1px;
    font-size: 16px;
    font-weight: 700;
}
.delivery-container .pickup-container p{
    font-size: 13px;
    color: var(--fade2);
    font-weight: 400;
}
.delivery-container .pickup-container a{
    font-size: 15px;
    text-decoration: none;
}






.cart-x-container .cart-x-heading{
    /* color: var(--fade3); */
    padding: 10px;
    /* font-weight: 800; */
    border-bottom: 1px solid var(--fade4);
}
.cart-x-container #bi-heading{
    text-align: center;
    font-size: 25px;
    color: var(--btn);
}

.cart-x-item-2 .delivery-logo {
    display: flex;
    align-items: center;
    padding-top: 5px;
}
.cart-x-item-2 .delivery-logo div:nth-child(1){
    font-size: 13px;
    font-weight: 700;
}
.cart-x-item-2 .delivery-logo  img{
    width: 8px;
    height: 8px;
    margin: 0 4px;
}
.cart-x-item-2 .delivery-logo div:nth-child(3){
    color: var(--btn);
    font-size: 13px;
}








/* -------------------------------------------------.cart-total-order-container-------------------------- */
.cart-total-order-container{
    /* border: 4px solid blue; */
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.cart-total-order{
    /* border: 4px solid red; */
    /* margin: 10px; */
    padding-bottom: 10px;
    margin-top: 20px;
    border-bottom: 1px solid var(--fade4);
}
.cart-x-flex{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}
.cart-x-flex .cart-x-item-1 img{
    width: 80px;
    height: 80px;
}
.cart-x-flex .cart-x-item-2 p:nth-child(1){
    color: var(--fade);
    font-size: 19px;
    /* font-weight: 700; */
}
.cart-x-flex .cart-x-item-2 p:nth-child(2){
    color: var(--fade2);
    font-size: 14px;
    padding: 2px 0;
}
.cart-x-flex .cart-x-item-2 p:nth-child(3){
    color: var(--btn);
    font-size: 13px;
}
.cart-x-flex .cart-x-item-3{
    margin-left: 10%
}
.cart-x-flex .cart-x-item-3 h3{
    
}
.cart-x-flex .cart-x-item-3 p{
    color: var(--fade2);
}
.cart-x-flex .cart-x-item-3 p span{
    color: var(--red);
}







/* -------------------------------------------------remove-cart-container------------------------------------- */
.remove-cart-container{

}
.remove-cart-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.remove-cart-flex .remove-item-1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 10px;
}
.remove-cart-flex .remove-item-1 p{
    color: var(--btn);
    font-size: 20px;
    font-weight: 800;
    margin-right: 30px;
    cursor: pointer;
}
.remove-cart-flex .remove-item-1 div{
    color: var(--btn);
    font-size: 18px;
    cursor: pointer;
    /* font-weight: 800; */
}
.remove-cart-flex .remove-item-1 .remove_cart_btn button{
    font-size: 18px;
    color: var(--btn);
    outline: none;
    border: none;
    background-color: var(--transparent);
    cursor: pointer;
}
.remove-cart-flex .remove-item-2 .box-2{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.remove-cart-flex  .box-2>div{
    width: 35px;
    height: 35px;
    border-radius: 4px;
    background: var(--btn);
    /* box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.4); */
    padding-top: 5px;
    margin-left: 7px;
    cursor: pointer;
    text-align: center;
    border: 1px solid var(--fade4);
    font-size: 20px;
    font-weight: 800;
    color: var(--white);
}
.remove-cart-flex  .box-2 button{
    width: 35px;
    height: 35px;
    border-radius: 4px;
    background: var(--btn);
    /* box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.4); */
    padding-top: 5px;
    margin-left: 7px;
    cursor: pointer;
    text-align: center;
    border: 1px solid var(--fade4);
    font-size: 20px;
    font-weight: 800;
    color: var(--white);
}
.remove-cart-flex  .box-2>div:hover{
    box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.4);
}
.remove-cart-flex  .box-2>div:nth-child(1){
    font-weight: bolder;
}




.cart-y-container{
    /* border: 2px solid red; */
    padding-bottom: 10px;
}
.cart-y-container .cart-y-heading{
    padding: 10px;
    border-bottom: 1px solid var(--fade4);
}
.cart-y-container .total-cart{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}
.cart-y-container .total-cart p{
    font-size: 16px;
    color: var(--fade);
    font-weight: 700;
}
/* .cart-y-container .total-cart-btn{
    width: 100%;
    height: 50px;
    border-radius: 5px;
    outline: none;
    border: none;
    text-align: center;
    background: var(--btn);
    margin-top: 40px;
    padding-top: 13px;
    box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.4);
}
.cart-y-container .total-cart-btn a{
    color: var(--white);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
   
} */

.cart-y-container button{
    width: 100%;
    height: 50px;
    border-radius: 5px;
    outline: none;
    border: none;
    color: var(--white);
    font-weight: 700;
    font-size: 16px;
    background: var(--btn);
    margin-top: 40px;
    box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.4);
    

}
.cart-y-container button:hover{
    box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.5);
}
.checkout-head{
    text-align: center;
    font-size: 14px;
    color: rgb(94, 94, 94);
    margin-top: 15px;
}
.checkout-note{
    text-align: center;
    font-size: 10px;
    color: orangered;
    margin-top: 10px;
}








/* -----------------------------------------------deposit-receipt-container----------------------------------- */
.deposit-receipt-container{
    /* border: 4px solid red; */
    /* margin-bottom: 200px; */
    /* margin-top: 50px; */
    background: var(--black);
}
.deposit-receipt-container .receipt-logo{
    text-align: center;
    display: flex;
    justify-content: center;
 }
 .deposit-receipt-container .receipt-logo>div{
    /* text-align: center; */
    
    width: 60px;
    height: 60px;
    font-weight: 600;
    padding-top: 20px;
    /* padding: 30px; */
    text-align: center;
    border-radius: 10px;
    background: var(--btn);
 }
 .deposit-receipt-container .heading{
    text-align: center;
    color: var(--white-fade);
    font-size: 20px;
    font-weight: 600;
    margin-top: 10px;
 }



 .top-container{
    /* border: 2px solid red; */
 }
.top-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 30px;
    padding-top: 20px;
    background: var(--btn);
}
.top-flex img{
    width: 80px;
    height: 80px;
    border-radius: 10px;
}
 .deposit-receipt-center{
    /* border: 3px solid red; */
    display: flex;
    justify-content: center;
    margin: 10px;
 }
 .top-flex .space-1 div{
    font-size: 22px;
    font-weight: 600;
    color: var(--white);
 }
 .top-flex .space-1 p{ 
    font-size: 11px;
    /* font-weight: 600; */
    color: var(--fade);
 }

 .deposit-receipt-center>div{
    /* border: 3px solid orange; */
    width: 700px;
    border-radius: 15px;
    margin-top: 30px;
    padding-bottom: 20px;
    background: var(--white);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    
 }
 .deposit-receipt-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background: var(--btn); */
    border-radius: 15px 15px 0 0;
    /* background-image: linear-gradient(to right, var(--btn), #e5c2ad ); */
    padding: 20px;

      background-image: url(image/not3.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.deposit-receipt-flex .margin-bottom{
    margin-bottom: -30px;
}


.copied-box{
    text-align: center;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    /* margin-bottom: -20px; */
    background-color: red;
    height: 30px;
}
#copied{
    /* display:none; */
    width: 100px;
    border: 1px solid rgb(8, 131, 16);
    border-radius: 10px;
    color: rgb(104, 164, 14);
    font-weight: ;
    font-size: 12px;
    padding: 5px 10px;
    text-align: center;
}
#input{
    position: fixed;
    margin-bottom: -9999px;
}
.my-referral-div{
    padding: 10px;
    width: 100%;
    color: gray;
    border-radius: 10px;
}
.copy-btn{
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.copy-btn .btn-item{
    text-align: center;
    border-radius: 20px;
    background: #3a2576;
    width: 170px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.copy-btn .btn-item:hover{
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6);
    cursor: pointer;
}
.copy-btn .btn-item .txt-1{
    color: white;
    font-size: 25px;
}
.copy-btn .btn-item .txt-2{
    color: rgb(208, 206, 206);
    font-size: 8px;
}
.share-flex{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.share-flex button{
    /* margin: 5px; */
    outline: none;
    border: none;
    border-radius: 10px;
    color: rgb(78, 78, 78);
    padding: 7px;
    width: 35px;
    height: 35px;
    text-align: center;
    background: transparent;
}
.share-flex button i{
    font-size: 20px;
}
.share-flex button img{
    width: 17px;
}








.deposit-receipt-flex .content{
    display: flex;
    color: gray;
    font-weight: 600;
}
.deposit-receipt-flex .bank div{
    font-size: 30px;
    font-weight: 700;
    margin-top: 20px;
}
.deposit-receipt-flex .bank p{
    color: rgb(106, 106, 106);
    font-size: 12px;
}

.deposit-receipt-flex div{
    color: var(--black);
}
.deposit-receipt-flex .content:hover{
    /* border: 2px solid var(--white-fade); */
    color: gray;
    
}
.deposit-receipt-flex .content img{
    width: 60px;
    height: 60px;
    border-radius: 10px;
}
.deposit-back{
    color:var(--btn);
    text-align: center;
    cursor: pointer;
}
#deposit-monipoint{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 99999999999999999999999999999999999999999999999;
    margin: 0;
    padding-top: 30px;
    /* display: none; */
}
#deposit-paystack{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 99999999999999999999999999999999999999999999999;
    margin: 0;
    padding-top: 30px;
    display: none;
}
#deposit-monipoint p{
    padding-top: 5px;
}
#deposit-paystack p{
    padding-top: 5px;
}
.bank-detail-container{
   /* border: 2px solid red; */
}
.bank-detail-flex{
   display: flex;
   justify-content: space-between;
 }
 .bank-detail-flex .item{
    /* border: 2px solid red; */
    width: 100%;
    padding: 20px;
    margin: 20px;
    border-radius: 20px;
    /* background: rgb(229, 229, 229); */
    background: rgba(0, 0, 0, 0.05);
    /* background-image: linear-gradient(to left, var(--btn), #ADD7E5 ); */
  }
  .bank-detail-flex .item>div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .bank-detail-flex .item .item-unit{
    line-height: 16px;
  }
  .bank-detail-flex .item .item-unit p{
    font-weight: 600;
    font-size: 12px;
  }
  .bank-detail-flex .item .item-unit .div{
    font-size: 12px;
    color: rgb(89, 89, 89);
  }
  .bank-detail-flex .item>div input{
    font-size: 18px;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    margin-top: 2px;
  }
  .bank-detail-flex .item>div div>div{
    color: gray;
    font-size: 12px;
  }

  .bank-detail-flex #item{
    /* background: var(--black); */
  }
   .bbc-input select{
    font-size: 18px;
    width: 100%;
    border: none;
    outline: none;
    /* background: transparent; */
    margin-top: 2px;
    border: 1px  solid gray;
    border-radius: 10px;
    padding: 10px ;
  }
  .bbc-btn{
    /* text-align: center; */
    display: flex;
    justify-content: center;
    /* border: 1px  solid gray; */
  }
  .bbc-btn button{
    text-align: center;
    width: 250px;
    border: none;
    border-radius: 5px;
    padding: 14px 10px;
    margin-top: 50px;
    background: var(--btn);
    color: white;
    font-size: 16px;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2), 0px 6px 20px 0px rgba(0, 0, 0, 0.19);
  }
  .bbc-btn button:hover{
    color:var(--black);
    transform: scale(0.95);  
    background: var(--black);
    color: var(--btn);
    transition: .1s;
  }
.deposit-exist-btn-container{
    display: flex;
    justify-content: center;
}
.deposit-exist-btn{
    text-align: center;
    text-decoration: none;
    padding: 12px 50px;
    background: var(--btn);
    color: var(--white);
    font-weight: 600;
    margin-top: 50px;
    margin-bottom: 50px;
}

.deposit-exist-btn:hover{
    transform: scale(0.95); 
    text-decoration: none;
    color: rgb(214, 214, 214);
}
.receipt-flex{
    /* display: flex;
    justify-content: center; */
    margin: 10px 10px 20px 20px;
}
.receipt-flex .head{
    color: orangered;
    font-size: 13px;
    margin-bottom: 5px;
}


#tips-container{
    padding: 0 20px;
}
.tips-container div{
    color: var(--btn);
    font-weight: 500;
}
.tips-container p{
    color: gray;
    font-size: 12px;
  
}

.notifiction-msg{
    text-align: center;
    font-size: 12px;
    width: 70%;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid rgb(189, 189, 189);

}








/* ------------------------------------------------------pop-container---------------------------------------- */
.pop-container{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999999999999999999999999999999999999999999999999999999;
    overflow: auto;

}

.pop-station{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999999999999999999999999999999999999999999999999999999;
    overflow: auto;
}
.pop-flex{
    display: flex;
    justify-content: center;
    padding: 10px;
}
#pop-station{
    display: flex;
    justify-content: center;
    margin: 10px;
}
#pop-station-item{
    /* border:  2px solid red; */
    margin: 20px 10px 10px 10px;
}
.pop-flex .content{
    margin: 10px 20px;
    margin-top: 100px;
    width: 530px;
    padding: 20px 15px 20px 15px;
    /* border: 3px solid red; */
   
    background: var(--primary);
    border-radius: 10px;
}
.pop-flex .content .pop-heading{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pop-flex .content .pop-heading h4{
    color: var(--btn);
    font-size: 22px;
    font-weight: 800;
}
.pop-flex .content .pop-heading h3{
    color: var(--btn);
    font-size: 24px;
    font-weight: 800;
}
.pop-flex .content .pop-heading a{
    color: var(--red);
    text-decoration: none;
    font-weight: 800;
    font-size: 20px;
}
.pop-flex .content .pop-btn{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap;
}
.pop-flex .content .pop-btn a{
    width: 100%;
}
.pop-flex .content .pop-btn button{
    /* padding: 10px 20px; */


    width: 100%;
    height: 40px;
    border: 1px solid var(--btn);
    outline: none;
    border-radius: 5px;
    background: var(--btn);
    color: var(--white);
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    margin-top: 10px;
}
.pop-flex .content .pop-btn button:hover{
    box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.4);
}
#shop-btn{
    background: var(--transparent);
    color: var(--btn);
}
.pop-flex .size-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}







.pop-flex .size-container .box-2{
    display: flex;
    align-items: center;
}
.pop-flex .size-container .box-1 .size-price{
    display: flex;
    align-items: center;
}
.pop-flex .size-container .box-1 .size-price span{
    font-weight: bold;
    padding-right: 10px;
}
.pop-flex .size-container .box-1 .size-price small{
    color: var(--fade2);
}
.pop-flex .size-container .box-1  .price-icon{
    font-size: 11px;
}
.pop-flex .size-container .box-1  .price-icon span{
    font-size: 14px;
}



.pop-flex .size-container .box-2>div{
    width: 35px;
    height: 35px;
    border-radius: 4px;
    background: var(--btn);
    /* box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.4); */
    padding-top: 5px;
    margin-left: 7px;
    cursor: pointer;
    text-align: center;
    border: 1px solid var(--fade4);
    font-size: 20px;
    font-weight: 800;
    color: var(--white);
}
.pop-flex .size-container .box-2>div:hover{
    box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.4);
}
.pop-flex .size-container .box-2>div:nth-child(1){
    font-weight: bolder;
}

/* 
#pop-head h3{
    color: var(--btn);
} */
.pop-flex .pop-input{
    /* border:1px solid rgb(202, 47, 47); */
    background: var(--white);
    margin-top: 10px;
    padding-left: 10px;
    
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pop-flex .pop-input input{
    width: 95%;
    border: none;
    outline: none;
    background: var(--transparent);
    font-size: 18px;
    padding: 10px 10px;

}
.pop-flex .pop-input i{
    padding-left: 5px;
    font-size: 12px;
}
#pop-btn{
    margin-top: 30px;
}


.input-copy{
    position: fixed;
    bottom: -300px;
}











/* -----------------------------------------form-wrapper____________________________________ */
.form-wrapper{
    margin-bottom: 18%;
    margin-top: 5%;
}
.continue-frame{
    margin-bottom: 400px;
}
.login-head-frame{
    text-align: center;
    color: var(--btn);
    font-size: 25px;
    margin-bottom: 20px;
    margin-top: 20px;
}
.heading-container{
    text-align: center;
}
.heading-container h2 {
    font-size: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
    color: var(--background-deep);
}
.form-flex{
    display: flex;
    justify-content: center;
    
}
.form-flex .form {
     width: 70%;
     /* border: 3px solid var(--red); */
     /* min-height: 450px; */
}



.form-wrapper .write-container{
    text-align: center;
    line-height: 30px;
}
.form-flex .form .level{
    /* border: 3px solid var(--red); */
    border-radius: 20px;
}
.form-flex .form .item{
    width: 100%;  
}
.form-flex .form .item p{
    margin-bottom: -10px;
    font-size: 15px;
}
.form-flex .form .item div{
    display: flex;
    align-items: center;
     background: var(--white);
     padding-left: 20px;
     margin: 15px 0px;
     border: 1px solid var(--line);
     border-radius: 10px;
}
.form-flex .form .item div i{
    font-size: 22px;
}
.form-flex .form .item div select{
    width: 100%;
    background: var(--transparent);
    border: none;
    border-radius: 10px;
    font-size: 20px;
    padding: 13px 20px;
    outline: none;
}
.form-flex .form .item div input{
    width: 100%;
    background: var(--transparent);
    border: none;
    border-radius: 10px;
    font-size: 20px;
    padding: 13px 20px;
    outline: none;
}
.form-flex .form .item select{
    width: 100%;
    background: var(--transparent);
    border: none;
    border-radius: 10px;
    font-size: 20px;
    padding: 13px 20px;
    outline: none;
}
.submit-btn-container{
    display: flex;
    justify-content: center;
}
.submit-btn-container .submit-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    cursor: pointer;
    background: var(--btn);
    font-size: 22px;
    padding: 16px 86px;
    margin: 20px 0px;
    border-radius: 10px;
    outline: none;
    border: none;
}
.submit-btn-container .submit-btn i{
    margin-right: 10px;
}
.submit-btn-container .submit-btn:hover{
    /* background: var(--hover); */
    /* color: var(--primary); */
}

.loader_gif{
    width: 25px;
    height: 25px;
    display: none;
}
.already-member{
    text-align: center;
    font-size: 18px;
}
.already-member a{
    text-decoration: none;
}



.form-flex .form .content-flex{
    /* border: 2px solid blue; */
    display: flex;
    justify-content: center;
}
.form-flex .form .content{
    text-align: center;
}
.form-flex .form .content p{
    width: 250px;
    height: 50px;
    padding-top: 12px;
    cursor: pointer;
    background: var(--background-deep);
    /* border: 3px solid orange; */
}
.form-flex .form .content p:hover{
    background: var(--background-light);
}
.form-flex .form .content a{
    color: white;
    font-size: 20px;
}











/* ------------------------------------------------------heading-container---------------------------------- */
.heading-container-dashboard{
    margin: 0 100px -25px 360px;
    /* border: 1px solid red; */  
}

.heading-flex{
    display: flex;
    justify-content: space-between;
    /* border: 2px solid blue; */
}
.heading-flex .inner-flex{
    display: flex;
    justify-content: space-evenly;
    flex-flow: row wrap;
    /* border: 2px solid rgb(0, 179, 255); */
    width: 100%;
}
.heading-flex .item{
    /* width:100%; */
    /* min-height: 100px; */
    padding: 10px;
    margin: 10px 0;
    border-radius: 10px;
    /* border: 1px solid var(--fade); */
    /* background: var(--white); */
    /* border: 2px solid red; */
    /* text-align: center; */
    /* border: 2px solid red; */
}
.item-menu{
    /* border: 2px solid red; */
    /* width: 200px; */
    display: flex;
    align-items: center;
}
.item-menu #dash-menu{
    margin-right: 40px;
    font-size: 20px;
}
.welcome_container{
    /* border: 2px solid yellow; */
}
.heading-flex .item .cart-disappear{
    display: flex;
    align-items: center;
    padding-right: 10px;
    text-decoration: none;
}
.heading-flex .item .cart-disappear img{
    width: 30px;
    height: 30px;
}
.heading-flex .item .cart-disappear sup{
    font-size: 18px;
    margin-left: 5px;
    color: var(--text2);
}







/* ----------------------------------table---------------------------------------- */
.table-container{
    background: url(img/login_banner.jpg) center / cover;
    border-radius: .9rem;
}
main.table{
    width: 100%;
    height: 70vh;
    background-color: #0009;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    box-shadow: 0.4rem .8rem #0005;
    border-radius: .8rem;
    overflow: hidden; 
    
}
.table-header{
    width: 100%;
    height: 10%;
    background: #fff5;
    padding: .8rem 1em;
}
.table-body{
    width: 95%;
    /* max-height: 89%; */
    max-height: calc(85% - .8rem);
    background: #fffb;
    margin: .8rem auto;
    border-radius: .6rem;
    overflow: auto;
}
.table-body::-webkit-scrollbar{
    width: 0.5rem;
    height: 0.5rem;
}
.table-body::-webkit-scrollbar-thumb{
    border-radius: .5rem;
    background-color: #0004;
    visibility: hidden;
}
.table-body:hover::-webkit-scrollbar-thumb{
    visibility: visible;
}
table{
    width: 100%;
}
td img{
    width: 36px;
    height: 36px;
    margin-right: 8px;
    border-radius: 50%;
    vertical-align:middle;
}
table, th, td {
    padding: 1rem .4rem;
    border-collapse: collapse;
    text-align: left;
    padding-left: 10px;
}
td:not(:first-of-type){
    min-width: 8rem;
    /* border: 2px solid red; */
}
td:nth-child(2){
    min-width: 3rem;

}
thead{
    position: sticky;
    top: 0;
    left: 0;
    background-color: #d5d1defe;
}
tbody tr:nth-child(even){
    background-color: #0000000b;
}
tbody tr:hover{
    background-color: #fff6;
}
tbody .status button{
    background-color: #86e49d;
    color: #006b21;
}
tbody .status1 button{
    background-color: #d893a3;
    color: #b30021;
}
tbody .status2 button{
    background-color: #ebc474;
}
tbody .status3 button{
    background-color: #6fcaea;
}
tbody .status4 button{
    background-color: red;
}
tbody button{
    /* padding: 7px 10px; */
    width: 130px;
    height: 30px;
    border: none;
    outline: none;
    border-radius: 5px;
}
tbody button:hover{
    transform: scale(0.95);
}
.search-container{
    /* border: 2px solid red; */
}
.search-container >div{
    display: flex;
    justify-content: center;

}
.search-container >div input{
    width: 90%;
    padding: 10px 25px;
    border-radius: 30px;
    margin: 20px 0px;
    font-size: 18px;
    color: var(--fade-white);
    background: var(--transparent);
    outline: none;
    border: none;
    border:  2px solid var(--fade-light);

}






/* ===========================about-container============================= */
.about-container{
    background: white;
    padding: 15px;
}
.about-flex .item-1 .head p a{
    text-decoration: none;
}
.about-flex .head-2{
    color: rgb(106, 106, 106);
    font-size: 25px;
    margin-top: 20px;
}
.about-flex .item-2 p{
    color: rgb(88, 88, 88);
    margin-top: 15px;
    font-size: 14px;
}
.about-flex  .item-3{
    background:black;
    margin-top: 80px;
    display: flex;
    justify-content: center;
    padding: 40px 0;
}
.about-flex  .item-3 .unit{   
    /* border: 1px solid rgb(168, 12, 12); */
    width: 80%;
    border-radius: 10px;
}
.about-flex  .item-3 .unit .t-1{   
    color: rgb(171, 171, 171);
    font-size: 22px;
}
.about-flex  .item-3 .unit .t-2{   
    color: white;
    font-weight: bold;
    margin: 15px 0;
    font-size: 35px;
}
.about-flex  .item-3 .unit .t-3{   
    color: white;
    font-size: 13px;
    margin-bottom: 20px;
}
.about-flex  .item-3 .unit .t-4{   
    font-size: 13px;
    margin-top: 15px;
}
.about-flex  .item-3 .unit .t-4 div{   
    color: rgb(195, 195, 195);
    font-size: 18px;
    text-transform: uppercase;
}
.about-flex  .item-3 .unit .t-4 p{   
    color: rgb(226, 226, 226);
    margin-left: 15px;
}




/* ================================box-3-contaner=========================== */
.box-3-contaner{
    padding-top: 50px;
    background: white;
    padding-bottom: 100px;
    
}
.box-3-contaner .head{
    text-align: center;
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 30px;
    color: rgb(76, 76, 76);
    margin-bottom: 60px;
    
}
.box-3-flex{
    display: flex;
    justify-content: space-between;
}
.box-3-flex .item{
    width: 300px;
    /* height: 200px; */
    border-radius: 10px;
    padding: 10px 20px;
    text-align: center;
    margin: 10px;
    box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.07);
}
.box-3-flex .item .t-1{
    /* width: 50px;
    height: 50px;
    border: 2px solid red;
    border-radius: 50%; */
}
.box-3-flex .item .t-1 span{
    font-size: 40px;
}
.box-3-flex .item .t-2{
    font-size: 16px;
    font-weight: bold;
}
.box-3-flex .item .t-3{
    font-size: 12px;
    margin-top: 12px;
    color: rgb(75, 75, 75);
}





/* ==============================box-1-contaner-============================ */
.box-1-contaner{
    background-color: white;
}
.box-1-contaner .head{
    text-align: ;
    padding: 10px;
}
.box-1-flex{
    /* display: flex;
    justify-content: center; */
    padding: 0 10px;
}
.box-1-flex .item{
    width: 100%;
}
.box-1-flex .item .t-1{
    font-size: 16px;
    font-weight: bold;
}
.box-1-flex .item .t-2{
    font-size: 13px;
    margin-top: -7px;
    margin-left: 19px;
}






.sub-footer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 150px 7%;
    /* background-color: #100d5c; */
    /* background-color: #336699; */
    background-color: #000;
    font-size: 12px;
    color: #eee;
  }
  .sub-footer > div{
    width: 23%;
  }
  .sub-footer a{
    text-decoration: none;
    color: #eee;
    line-height: 40px;
  }
  .small-space{
    margin-bottom: 10px;
  }
  .letter{
    background-color: #fff;
    width: 100%;
    border: 0px;
    height: 40px;
  }
  .letter-input{
    border: 0px;
    width: 60%;
    font-size: 12px;
  }
  .letter-btn{
    border: 0px;
    width: 35%;
    margin: 0px;
    height: 100%;
    float: right;
    cursor:pointer;
    color: #eee;
    background-color: orangered;
    font-size: 12px;
  }
  .copyright{
    padding: 20px 7%;
    background-color: #000;
  
    color: #eee;
    border-top: 1px #eee solid;
    font-size: 12px;
    text-align: center;
  }
  .copyright a{
      text-decoration: none;
      color: #eee;
  }
  #map{
    margin-bottom: -10px;
  }
  section#tracking{
    height: 400px;
    padding: 150px 25%;
  }
  tr:nth-child(odd){
    /* background-color: #666; */
  }
  .menu{
    position: fixed;
    background-color: #515A82;
    width: 300px;
    padding: 30px;
    height: 100%;
  }
  .menu a{
    color: #eee;
    text-decoration: none;
    line-height: 34px;
  }
  .contentx{
    margin-left: 320px;
  }
  .contentx-area{
    border-radius: 5px;
    background-color: #515A82;
    padding: 30px;
    overflow: auto;
    width: 98%;
    color: #eee;
    align-items: center;
    justify-content: center;
  }
  .contentx-area input, .contentx-area select{
    margin-bottom: 10px;
  }
  #straightx{
    background-color: #eee;
    color: #000;
    width: 90%;
  }
  #straight{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #straight input, #straight select{
    margin-bottom: 10px;
    width: 100%;
  }
  #straight textarea{
    margin-bottom: 10px;
    width: 100%;
    height: 200px;
    padding: 10px;
  }
  .maintrack{
    background-color: rgba(0,0,0, 0.6);
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    overflow: auto;
    z-index: 9999999999999999999999999999;
  }
  .trackrrsult{
    width: 80%;
    margin-left: 10%;
    margin-top: 50px;
    margin-bottom: 50px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding: 70px 0px;
    justify-content: center;
    align-items: center;
  }
  







 
@media screen and (max-width:1353px){
    .sidebar-ads{
        display: none;
    }


    .main-flex .item{
        /* width: 900px; */
        /* height: 300px; */
        /* margin-left: 300px; */
        /* border-radius: 10px; */
    }
    .main-flex .item img{
        /* width: 100%;
        height: 100%;
        border-radius: 10px; */
    }
}


@media screen and (max-width:1200px){
    .header-flex .item-1 a{
        font-size: 29px;
    }
    .header-flex .item-2{
        width: 40%;
    }
    .header-flex .item-2 input{
        padding: 10px 10px;
        font-size: 16px;      
    }
    .header-flex .item-2 img{
        width: 13px;
        height: 13px;
    }


    .dashboard-flex .item-1{
        width: 390px;
    }
    .dashboard-flex .item-2{
        width: 500px;
    }
    
}




@media screen and (max-width:1000px){
    .header-flex .arrow{
        width: 15px;
        height: 15px;
        margin-left: 2px;
    }
    .help{
        display: none;
    }
    .profile{
        margin-right: 10px;
    }
}




@media screen and (max-width:900px){
    .sidebar{
        left: -280px;
    }
    /* .sidebar{
        position: fixed;
        z-index: 2;
        top: 100px;
        left: 0;
        width: 210px;
        height: 400px;
        overflow-x: auto;
        background: var(--white);
        transition: all .5s ease;
        border-radius: 10px;
        margin-left: 0px;
    } */
    .menu-container{
        display: block;
    }

    #menu{
        display: block;
    }
    .header-flex{
        padding: 25px 3%;
    }
    .header-flex img{
        /* width: 20px;
        height: 20px; */
    }
    .header-flex .item-1 .menu{
        /* width: 25px;
        height: 25px;
        margin-right: 40px;
        padding-top: -90px; */
    }
    .header-flex .item-1 .logo{
        width: 70px;
        height: 40px;
    }


    .main-container{
        margin: 10px;
    }
    .main-flex .item{
        /* width: 900px; */
        /* height: 400px; */
        margin-left: 0;
    }


    .sub-footer{
        padding: 50px 4%;
        flex-wrap: wrap;
      }
    .sub-footer >div{
      width: 45%;
      margin-top: 30px;
    }
    .values{
      width: 48%;
    }
    .copyright{
        padding: 20px 4%;
      }
    
}





@media screen and (max-width:840px){
    .sidebarxx{
        /* position: fixed; */
        /* z-index: 2; */
        left: -280px;
        /* top: 70px; */
        /* top: 0; */
        /* left: 0; */
        /* width: 450px; */
        /* height: 100vh; */
        /* overflow-x: auto; */
        /* background: var(--white); */
        /* background: var(--btn); */
        /* transition: all .5s ease; */
        /* padding-top: 30px; */
        /* border: 1px solid var(--fade); */
        /* border-top-color: transparent; */
    }
    .heading-container-dashboard{
        margin: 0 10px -30px 10px;
        /* border: 1px solid red; */  
    }
    .general-product-container{
        margin: 20px 10px 30px 10px;
    }
    #item-2{
        display: none;
    }
    .search-container{
        display: block;
    } 
    .search-box-container{
        display: block;
    } 



    .form-wrapper{
        margin:40px 4%;
    }
    .continue-frame{
        margin-bottom: 300px;
        /* border: 5px solid red; */
    }
    .form-flex .form {
         width: 90%;
    }
    .form-flex .form .item div input{
        /* font-size: 18px; */
        /* padding: 15px 20px; */
        /* outline: none; */
        /* margin: 10px 0px; */
    }
    .submit-btn-container .submit-btn{
        font-size: 17px;
        padding: 14px 46px;
        margin: 30px 0px;
        border-radius: 10px;
    }


    .dashboard-flex{
        display: flex;
        justify-content: space-between;
    }
    .dashboard-flex .item-1{
        width: 500px;
    }
    .dashboard-flex .item-2{
        width: 400px;
    }


     .pop-flex .units{
        margin-left: 0;
     }
     .pop-flex .units .item{
        padding: 0 15px;
      }
    

}

@media screen and (max-width:720px){
    .item-3 .cart:hover>#drop-cart{
        display: block;
        /* border: 2px solid red; */
        margin-left: -150px;
    }

    .item-3 .profile:hover>#drop-profile{
        display: block;
        margin-left: -150px;
    }
}

@media screen and (max-width:640px){
    .top-flex{
        /* display: flex;
        justify-content: space-between;
        padding: 4px 10px; */
    }
    .top-flex .item-1{
        margin-left: 3%;
        margin-right: 1%;
    }
    .top-flex .item-1 a{
        /* display: flex;
        align-items: center;
        text-decoration: none; */
    }
    .top-flex .item-1 a >div{
        /* border: 2px solid orange; */
    }
    .top-flex .item-1 a div:nth-child(1){
        width: 21px;
        height: 21px;
        /* margin-right: 3px; */
    }
    .top-flex .item-1 a div:nth-child(1) img{
        padding: 6px;
        width: 100%;
        height: 100%;
    }
    
    
    .top-flex .item-1 a div:nth-child(2){
        /* color: var(--btn); */
        font-size: 11px;
        font-weight: 300;
        word-spacing: -2px;
    }
    .top-flex .item-2{
        /* display: flex; */
        /* align-items: center; */
    }
    
    .top-flex .item-2 a{
        /* display: flex; */
        /* align-items: center; */
        padding: 0 10px;
        /* text-decoration: none; */
        /* color: gray; */
        font-size: 8px;
        /* border: 2px solid red; */
    }
    .top-flex .item-2 .logo{
        font-size: 10px;
    }
    .top-flex .item-2 .logo-img{
        width: 7px;
        height: 7px;
        /* margin-top: -15px; */
        /* margin-left: 2px; */
    }

    .top-flex .item-2 .logo-img img{
        width: 100%;
        height: 100%;
    }
    
    .top-flex .item-2 .imgx{
        width: 12px;
        height: 12px;
    }
    .top-flex .item-2 .imgx img{
        width: 100%;
        height: 100%;
    }
    .top-flex .item-2 .pay-icon{
        margin-top: -9px;
        /* margin-left: 2px; */
    }

    


    .already-member{
        font-size: 14px;
    }
    .already-member a{
        font-size: 14px;
    }










    .main-flex .item{
        width: 100%;
        height: 100px;
    }
    #main-flex .item{
        width: 100%;
        height: 180px;
    }
    .header-flex .item-1 a{
        font-size: 25px;
    }
    .header-flex{
        padding: 15px 4%;
    }


    .search-flex{
        padding: 4px 0;
        margin: 0 10px;
        margin-top: 5px ;
    }
    .search-flex input{
        /* width: 90%; */
        font-size: 13px;
        padding: 5px;
       
    }
    .search-flex img{
        width: 12px;
        height: 12px;
    }
    .header-flex .item-1 .menu{
        /* width: 20px;
        height: 20px;
        margin-right: 25px;
        display: initial; */
    }
    .header-flex .item-1 .logo{
        width: 70px;
        height: 30px;
    }
    .profile img{
        margin-right: 20px;
    }
    .cart-disappear{
        /* display:none; */
    }


    .acount-disappear{
        display: none;
    }




    .slider-flex{
        justify-content: space-around;  
    }
    .slider-flex .item{
        width: 150px;
        height:150px;
    }





    .deal-flex{
        justify-content: space-around;  
    }
    .deal-flex .item{
        width: 150px;
        height:150px;
        /* border: 3px solid red; */
    }
    .deal-flex .item .caption{
        font-size: 10px;
        /* margin-top: -6px; */
    }


    .cart-flex{
        justify-content: space-around;  
    }
    .cart-flex .item{
        width: 140px;
        /* height:150px; */
     
    }
    .cart-flex .item .discount-percent{
        margin-left: 90px;
        margin-top: 20px;
    }
    .cart-flex .item .name{
        font-size: 12px;
        padding: 3px 0;
    }
    .cart-flex .item .price{
        font-size: 14px;
        padding: 2px 0;
    }
    .cart-flex .item .discount{
        font-size: 10px;
    }
    .cart-flex .item .left-item{
        font-size: 10px;
    }




    .banner-flex .item{
        width: 1200px;
        height: 130px;
    }





    .dashboard-flex{
        flex-flow: row wrap;
    }
    .dashboard-flex .item-1{
        width: 100%;
    }
    .dashboard-flex .item-2{
        width: 100%;
        margin-left: 0;
    }
    .view-screen{
        height: 430px;
    }


.item-2-heading-flex div:nth-child(1){
    font-size: 16px;
    padding: 10px 0px;
    line-height: 25px;
}
.item-2-heading-flex div:nth-child(2){
    font-size: 16px;
    margin-left: 10px;
}

.flash-sale-flex .item{
    width: 100%;
    height: 85px;
    border-radius: 0 0 5px 5px;
    border: 1px solid var(--red);
    padding-left: 10px;
}
.flash-sale-container .heading-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--red);
    border-radius: 5px 5px 0 0;
    padding: 2px 10px;
 
}
.flash-sale-flex .item .time-box{
    display: flex;
    align-items: center;
    padding:10px 0;
}
.flash-sale-flex .item .time-box h2{
    font-size: 17px;
}
.flash-sale-flex .item .time-box small{
    margin: 0 20px;
    font-size: 14px;
}
.flash-sale-flex .item .flash-discount{
    font-size: 14px;
}
.flash-sale-flex .item .left-over{
    font-size: 12px;
}
.heading-container .flash-time div:nth-child(1){
    margin-right: 10px;
    color: white;
}
.heading-container .flash-time div:nth-child(2){
    color: white;
    font-weight: 700;
}
.cart-description .shipping-flow{
    font-size: 10px;
    padding: 5px 0px;
}
.cart-description .shipping-flow span{
    font-size: 12px;
}
.cart-description .rate .verified span{
    font-size: 12px;  
}
.cart-description  .variation-heading a{
    font-size: 11px;
}
.cart-description .promotion-container .promotion-heading{
    padding: 5px 0;
}
.cart-description .promotion-container .item-box a{
    font-size: 11px;
    text-decoration: none;
}

.cart-description .promotion-container .item-box img{
    width: 15px;
    height: 12px;
}









.delivery-container .delivery-heading{
    padding: 5px;

}
.delivery-container .delivery-logo div:nth-child(1){
    font-weight: 600;
}
.delivery-container .delivery-logo div:nth-child(3){
    font-size: 12px;
}
.delivery-container .delivery-content p{
    font-size: 11px;
    font-weight: 400;
}
.delivery-container .delivery-content p a{
    font-size: 12px;
    text-decoration: none;
}
.delivery-container .delivery-content .location-heading{
    margin-top: 5px;
    padding-bottom: 0;
    font-size: 14px;
    margin-bottom: -10px;
}
.delivery-container .pickup-container{
    padding-top: 20px;
}
.delivery-container .pickup-container img{
    width: 22px;
    height: 22px;
}
.delivery-container .pickup-container .p-item{
    margin-left: 15px;
}
.delivery-container .pickup-container p:nth-child(1){
    padding-bottom: 1px;
    font-size: 14px;
}
.delivery-container .pickup-container p{
    font-size: 11px;
}
.delivery-container .pickup-container a{
    font-size: 12px;
}






.cart-x-flex{
    margin-top: 0;
}
.cart-x-flex .cart-x-item-1 img{
    width: 60px;
    height: 60px;
}
.cart-x-flex .cart-x-item-2 p:nth-child(1){
    font-size: 14px;
}
.cart-x-flex .cart-x-item-2 p:nth-child(2){
    font-size: 12px;
    padding: 0;
}
.cart-x-flex .cart-x-item-2 p:nth-child(3){
    font-size: 11px;
}
.cart-x-flex .cart-x-item-3{
    margin-left: 4%;
}
.cart-x-flex .cart-x-item-3 h3{
    font-size: 16px;
}
.cart-x-flex .cart-x-item-3 p{
    font-size: 14px;
}
.cart-x-flex .cart-x-item-3 p span{
    font-size: 12px;
}





.cart-x-container .cart-x-heading{
    padding: 5px;
}
.cart-y-container .cart-y-heading{
    padding: 5px;
}

.cart-x-item-2 .delivery-logo {
    padding-top: 0px;
}
.cart-x-item-2 .delivery-logo div:nth-child(1){
    font-size: 12px;
}
.cart-x-item-2 .delivery-logo  img{
    width: 7px;
    height: 7px;
    margin: 0 3px;
}
.cart-x-item-2 .delivery-logo div:nth-child(3){
    color: var(--btn);
    font-size: 9px;
}




.remove-cart-flex .remove-item-1{

    margin-left: 10px;
}
.remove-cart-flex .remove-item-1 p{
    color: var(--btn);
    font-size: 14px;
}
.remove-cart-flex .remove-item-1 div{
    font-size: 14px;
}
.remove-cart-flex .remove-item-2 .box-2{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.remove-cart-flex  .box-2>div{
    width: 35px;
    height: 35px;
    border-radius: 4px;
    background: var(--btn);
    /* box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.4); */
    padding-top: 5px;
    margin-left: 7px;
    cursor: pointer;
    text-align: center;
    border: 1px solid var(--fade4);
    font-size: 20px;
    font-weight: 800;
    color: var(--white);
}
.remove-cart-flex  .box-2>div:hover{
    box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.4);
}
.remove-cart-flex  .box-2>div:nth-child(1){
    font-weight: bolder;
}









.form-wrapper{
    margin-bottom: 100px;
}
.continue-frame{
    margin-bottom: 330px;
    /* border: 5px solid red; */
}
.login-frame{
    margin-bottom: 220px;
}
.heading-container h2 {
    font-size: 18px;
    margin-top: -20px;
    margin-bottom: 0;
}
.form-flex .form {
     width: 95%;
}

.form-flex .form .item p{
    margin-bottom: -12px;
    font-size: 13px;
}
.form-flex .form .item div{
     padding-left: 10px;
     margin: 15px 0px;
     /* border: 2px solid red; */
}
.form-flex .form .item div i{
    font-size: 16px;
}
.form-flex .form .item div input{
    font-size: 14px;
    padding: 10px 20px;
    margin: 5px 0px;
}
.submit-btn-container .submit-btn{
    font-size: 16px;
    padding: 10px 46px;
    margin: 10px 0px;
    width: 70%;
}







.deal-inner-container{
    width: 100%;
    /* border: 3px solid orange; */
    
    
}
.deal-inner-container .deal-deal-cover{
    /* border: 1px solid var(--white);
    border-radius: 5px;
    margin-top: 10px;
    background-color:var(--white); */
    /* border: 2px solid red; */
    background-color:var(--white);
    margin: 5px;
}
.deal-inner-container .item-flex{
    /* display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--fade4);
    border-radius: 5px;
    margin: 13px;
    margin-top: 20px;
    padding: 15px; */
    margin: 7px;
    padding: 7px;
    margin-top: 10px;

}

.deal-inner-container .left-item-1{
    /* display: flex; */
    /* align-items: center; */

    margin-top: -10px;
    /* border: 3px solid red; */
    width: 100%;
}
.deal-inner-container .left-item-1 .pending-image{
    width: 110px;
    height: 80px;
}
.deal-inner-container .left-item-1 img{
    width: 100%;
    height: 100%;
}
.deal-inner-container .left-item-1 .pending-details{
    /* border: 2px solid red; */
    margin-left: 10px;
 }
 .deal-inner-container .left-item-1 .pending-details p:nth-child(1){
    font-size: 15px;
    font-weight: 300;
 }
 .deal-inner-container .left-item-1 .pending-details p:nth-child(2){
    font-size: 13px;
    padding-bottom: 10px;
    padding-top: 3px;
    /* color: red; */
 }
 .deal-inner-container .left-item-1 .pending-details p:nth-child(3){
    width: 100px;
    padding: 2px;
 }
 .deal-inner-container .left-item-1 .pending-details p:nth-child(4){
   font-size: 13px;
   /* padding-top: 10px; */
 }
 .deal-inner-container .left-item-2 a{
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    color: var(--btn);
}














.deal-inner-container .order-heading{
    margin: 16px;
    /* margin-left: 16px; */
}
.deal-inner-container .order-heading p:nth-child(1){
    font-size: 18px;
    margin: 7px 0;
}
.deal-inner-container .order-heading .p-1{
    font-size: 14px;
 }

 .deal-inner-container  .left-pending-heading{
    margin-bottom: 10px;
 }
 .deal-inner-container .left-pending-heading p:nth-child(1){
    background: var(--fade2);
    color: var(--white);
    width: 100%;
 }
 .deal-inner-container .left-pending-heading p:nth-child(2){
    color: var(--dark-gray);
    font-size: 14px;
 }
 .deal-inner-container #pending-details-top .pending-details p{
    font-size: 16px;
    color: var(--dark-gray);
 }
 .deal-inner-container #pending-details-top .pending-details h3{
    font-size: 14px;
    
 }
 .deal-inner-container  .pending-details-top .pending-details a{
    text-decoration: none;
    font-size: 13px;
   
 }
 .deal-inner-container  .pending-details-top{
    margin-top: 60px;
}
.deal-deal-cover .two-box-container{
    /* border: 2px solid red; */
}
.deal-deal-cover .two-box-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap;
    /* border: 2px solid blue; */
    
}
.deal-deal-cover .two-box-flex .item{
    width: 500px;
    height: 320px;
    border: 1px solid var(--fade4);
    margin: 12px;
    border-radius: 5px;
}
.deal-deal-cover .two-box-flex .content{
    /* border: 2px solid red; */
    padding-bottom: 10px;
    
}
.deal-deal-cover .two-box-flex .content .headx{
    padding: 10px;
    font-size: 20px;
    color: var(--dark);
    border-bottom: 1px solid var(--fade4);
    margin-bottom: 5px;
}
.deal-deal-cover .two-box-flex .content .content-section-2{
    margin-top: 20px;
    /* padding-bottom: 10px; */
    /* border: 2px solid red; */
}
.deal-deal-cover .two-box-flex .content .headxxx{
    padding: 10px;
    font-size: 20px;
    color: var(--dark);
    /* margin-bottom: 5px; */
}
.deal-deal-cover .two-box-flex .content p{
    padding-left: 10px;
    font-size: 16px;
    color: var(--fade2);
    margin-top: 2px;
}






  
    
.deposit-receipt-center{
    /* border: 3px solid red; */
    display: flex;
    justify-content: center;
    margin: 10px;
  
 }
 .deposit-receipt-center>div{
    /* border: 3px solid orange; */
    margin-top: 10px;
    padding-bottom: 18px;
    font-size: 12px;
    
 }
 .deposit-receipt-flex{
    padding: 15px;
}
.deposit-receipt-flex .deposit-copied{
  font-size: 16px;
}
.deposit-receipt-flex .bank div{
    font-size: 25px;
    margin-top: 15px;
}
.deposit-receipt-flex .bank p{
    font-size: 10px;
}

.deposit-receipt-flex div{
    /* color: var(--white); */
}

.deposit-receipt-flex .content img{
    width: 60px;
    height: 60px;
    border-radius: 10px;
}
 .bank-detail-flex .item{
    width: 100%;
    padding: 15px;
    margin: 10px;
  }
  .bank-detail-flex .item>div{
    margin-bottom: 6px;
  }
  .bank-detail-flex .item>div input{
    font-size: 14px;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    margin-top: 2px;
    
  }
  .bank-detail-flex .item>div div>div{
    color: gray;
    font-size: 10px;
  }

.deposit-exist-btn-container{
    display: flex;
    justify-content: center;
}
#tips-container{
    padding: 0 12px;
}
.tips-container div{
    font-size: 13px;
}
.tips-container p{
    font-size: 8px;
    line-height: 14px;
  
}
.deposit-exist-btn{
    text-align: center;
    text-decoration: none;
    padding: 12px 50px;
    background: var(--btn);
    color: var(--white);
    font-weight: 600;
    margin-top: 30px;
}
.deposit-exist-btn:hover{
    transform: scale(0.95); 
}




.text-container{
    background:;
}
.text-flex{
    /* display: flex; */
    /* justify-content: center; */
    margin: 10px;
}
.text-flex .item{
    width: 95%;
    padding: 30px 20px;
    margin: 0 0px;
    margin-top: 30px;
}





.box-3-contaner .head{
    font-size: 25px;
    margin-bottom: 30px;
    
}
.box-3-flex{
    display: flex;
    justify-content: space-around;
    flex-flow: row wrap;
}
.box-3-flex .item{
    width: 300px;
    padding: 10px 20px;
    margin: 10px;
    box-shadow: 0px 2px 3px 1px rgba(99, 99, 99, 0.4);
}





.sub-footer{
    padding: 50px 10%;
    flex-wrap: wrap;
  }
.sub-contact{
    width: 98%;
    margin: 10px 0px;
  }
section#tracking{
  height: 300px;
  padding: 100px 10%;
  }
.social-btnxc{
  margin-right: 20px;
  margin-left: 82%;
}
.sub-footer >div{
  width: 100%;
  margin-top: 14px;
}
.sub-values{
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.main-single-div{
  padding: 0px 0%;
}
.values{
  width: 90%;
  align-self: center;
}




    
}
@media screen and (max-width:500px){
    .main-flex .item{
        width: 100%;
        /* height: 180px; */
    }
}



@media screen and (max-width:450px){
    .view-screen{
        height: 340px;
    }
}




@media screen and (max-width:400px){
    .main-flex  .item {
        /* width: 800px; */
        /* height: 150px; */
    }   
    .deal-flex .item{
        width: 120px;
        height:120px;
    }
    .sp-flex .wrap{
        width: 100%;
    }

}



@media screen and (max-width:370px){
    .view-screen{
        height: 280px;
    }
}




@media screen and (max-width:340px){
    .slider-flex .item{
        width: 120px;
        height:120px;
    }



    .cart-flex .item{
        width: 120px;
    }


    .view-screen{
        height: 250px;
    }
    
}


@media screen and (max-width:300px){
 
    .deal-flex .item{
        width: 100%;
        height:100%;
    }
    .cart-flex .item{
        width: 50%;
        /* border: 2px solid red; */
        /* height:100%; */
    }
    .slider-flex .item{
        width: 100%;
        height:100%;
    }
}