/** start login  **/

@import url('https://fonts.googleapis.com/css?family=Poppins');

:root{
    --background :#8862f0;
    --background-2 :#e9e8ee;
    --background-3 :#684ab9;
    --background-box :#ffffff;
    --background-input :#ffffff;
    --color-text : #a1a1a1;
    --color-text-2 : #ffffff;
    --color-text-3 : #8862f0;
    --color-text-4 : #bea9f7;
    --bg-linear : #7a46f3;
    --bg-linear1 : #5637a0;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: var(--background-2);
    font-family: Poppins !important;
}

/** for btn **/
div a{
    text-decoration: none;
    color: black;
    border-bottom: 1px solid transparent;
}
div a:hover{
    border-bottom: 1px solid rgb(16, 86, 143);
}

.btn-style {
    text-decoration: none;
    color: var(--color-text-2);
    width: 120px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-linear);
    margin: 5px 5px;
    border-radius: 5px;
    transition: 0.2s;
    font-weight: 600;
}

.btn-style:hover {
   background-color:var(--background-2) ;
   color: var(--color-text-3);
   border-bottom: transparent;
}

.ahref-style{
    width: 25px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 15px;
    text-transform: uppercase;
    border-radius: 5px;
    margin: 1px 0px;
    text-decoration: none;
    color: var(--color-text-2);
    background: var(--background-3);
}

.available{
    position: absolute;
    left: 7%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 20px;
    background-color: var(--background-3);
    color: var(--color-text-4);
    border-radius: 5px;
}

.not-available{
    position: absolute;
    left: 7%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 20px;
    background-color: var(--background-3);
    color: var(--color-text-4);
    text-decoration: line-through;
    border-radius: 5px;
}

.deduct:hover{
    text-decoration: line-through;
    border: 0;
}

.select-style{
    width: 90px;
    height: 50px;
    background: var(--background-2);
    color: var(--background);
    border: 0;
    border-radius: 5px;
    font-weight: 900;
    text-align: center;
    appearance: none;
}

.bg-color {
    background: var(--background);
}


/** start index  **/
.top {
    width: 100%;
    height: auto;
    background: var(--background-2);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 25px;
    flex-direction: row;
    justify-content: center;
}

.languages {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
}

.languages a {
    margin: 0px 10px;
    padding: 0px 10px;
    font-size: 15px;
    text-decoration: none;
    color:var(--color-text);
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.languages a:hover{
    color: var(--color-text-3);
    border-color: transparent;
}

.languages a img {
    width: 18px;
    margin: 0px 15px ;
}

.start-help a{
    display: inline-flex;
    font-size: 13px;
    margin: 0px 10px;
    text-decoration: none;
    color: var(--color-text);
    padding: 10px ;
    transition: 0.3s;
    border-bottom: 2px dotted var(--color-text);
}

.start-help a:hover{
    border-color: transparent;
    color: var(--color-text-3);
}


/** Nav + Logo **/
.nav-top {
    position: sticky;
    z-index: 10;
    top: 0%;
    width: 100%;
    height: auto;
    background-color:var(--background);
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    flex-direction: row;
}

.nav-top .logo {
    display: flex;
    cursor: pointer;
    width: auto ;
    height: 100%;
    align-items: center;
    justify-content: flex-start;
}

.nav-top .logo:hover{
 border-color: transparent;
    opacity: 0.5;
}

.nav-top .logo a {
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   font-size: 30px;
   padding: 5px;
   color: var(--color-text-2);
}

.nav-top .logo img {
    width: 50px;
    border-radius: 5%;
}

.btn-login ul  {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
}


/**  for product  **/
.product{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}

.product-top{
    margin:50px auto;
    width: 70%;
    height: auto;
    background-color: var(--background-input);
    padding: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: nowrap;
}

.product-top .more-product a{
    margin: 10px;
    color: var(--color-text);
    position: relative;
    padding: 1px 0px;
    display: inline-flex;
}

.product-top .more-product a:hover{
    border-color: var(--color-text);
}

.product-top .more-product a:visited{
    color: var(--color-text-3);
}

.product-center{
    padding: 0px 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.product-box{
    position: relative;
    z-index: 1;
    width: 220px;
    height: 340px;
    background-color: transparent;
    border-radius: 3px;
    margin: 15px 10px;
    transition: 0.5s;
    border: 1px solid var(--color-text);
}

.product-box::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background: var(--background-3);
    border-radius: 3px;
    transition: 1s;
}

.product-box:hover:before{
    width: 50%;
}

.product-box::after{
    content: "";
    position: absolute;
    right: 0%;
    bottom: 0;
    width: 0%;
    height: 2px;
    background: var(--background-3);
    border-radius: 5px;
    transition: 1s;
}

.product-box:hover::after{
    width: 50%;
}

.product-box-img{
    border-radius: 3px;
    width: 100%;
    height: 60%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-box a img{
    transition: .5s;
    width: 250px;
}

.product-box a img:hover{
 transform: scale(1.1);
}

.product-box-text{
    font-size: 12px;
    text-overflow: ellipsis;
    height: auto;
    padding: 10px 5px;
}

.product-box-text p{
    margin: 5px 15px;
}

.assess{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 20px;
    margin-top: 25px;
    padding: 5px;
}

.assess a{
    border-bottom: 1px solid transparent;
    color: var(--background-3);

}

.assess a:hover{
    border-color: var(--background-3);
}

.href-for{
    position: absolute;
    top: 10%;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: auto;
    z-index: 1;
    left: 90%;
}

.shop{
    display: flex;
    align-items: center;
    justify-content: center;
   margin-top: 10px;
    font-size: 10px;
}

.shop a{
    margin: 0px 10px;
}

/** end product **/
/** end index **/

/** start login **/
.form-center {
    direction: rtl;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 400px ;
    height: 600px ;
    background-color: var(--background-box);
    box-shadow: 0px  0px 1px 1px rgba(0, 0, 0, 0.226);
    display: flex;
    justify-content: center;
    padding: 0px 20px;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    text-align: center;
}

.form-center::after{
    position: absolute;
    content: "";
    width: 100%;
    height: 50%;
    top: 0%;
    left: -99%;
    transition: 1s;
    z-index: -1;
    background: linear-gradient(to left , #7a46f3 , rgb(69, 206, 240)); 
}

.form-center::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 50%;
    bottom: 0%;
    right: -99%;
    transition: 1s;
    z-index: -1;
    background: linear-gradient(to left , #7a46f3 , rgb(69, 206, 240));
}

.form-title{
    color: var(--bg-linear);
}

.form-title span{
    border-bottom: 3px dotted var(--color-text);
    padding: 5px 0px;
}

.btn-form{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: 50px;
    background-color: var(--background-input);
    color: var(--bg-linear);
    border-radius: 5px;
    font-size: 18px;
    margin: 25px 0px;
    border: 1px solid var(--color-text);
}

.btn-form i{
    padding: 0px 15px;
    width: 50px; 
}

.btn-form input{
      width: 200px;
    height: 50px;
    background: transparent;
    outline: 0px;
    border-top: 0px;
    border-bottom: 0px;
    border-left: 0px;
    border-image: initial;
    padding-right: 15px;
    border-right: 1px solid var(--color-text);
    font-size: 15px;
    color: var(--color-text);
    text-align: center;
}

.btn-form [type="submit"] {
    width: 100%;
    cursor: pointer;
    height: 100%;
    background: var(--bg-linear);
    color: var(--color-text-2);
    font-size: 18px;
    border-radius: 5px;
}

.btn-form [type="submit"]:hover{
    opacity: 0.8;
}

.forget{
  display: flex;
  align-items: center;
  justify-content: center;
}

.forget a{
    text-decoration: none;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 900;
     border-bottom: 1px dotted var(--color-text);
     padding: 5px 0px;
     margin: 0px 10px;
}

.forget a:hover{
    border-color: transparent;
}
/** End Login  **/

.section-center{
    padding: 20px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: rgb(221, 221, 221);
    height: 600px;

    margin: auto;
}


.section-right{
    position: relative;
    width: 600px;
    height: 500px;
    background: linear-gradient(to bottom, rgb(94, 93, 93) , rgb(150, 149, 149));
    margin: 5px;
    overflow: hidden;
    
}
.section-style-img{
    width: 100%;
    transition: 0.5s;
    
    
}

.section-style-img:hover{
    transform: scale(1.1);
}
.section-right-style{
    width: 100%;
    height: auto;
    position: absolute;
    z-index: 1;
    color: var(--background-4);
    background: rgba(255, 255, 255, 0.384);
    text-align: center;
    padding: 10px 0px;
    
    
}
.section-right-text{
    bottom: 0;
}

.section-left{
    overflow: hidden;
    width: 600px;
    height: 500px;
    margin: 5px;
    background: linear-gradient(to bottom, rgb(94, 93, 93) , rgb(150, 149, 149));
}
.section-left-top{
    position: relative;
    width: 100%;
    height: 50%;
    overflow: hidden;
}
.section-left-text{
    font-size: 13px;
    bottom: 0;
}
.font-text span{
    position: relative;
    color: var(--color-text-2);
    padding:5px 9px;
    
   
}
.font-text span::after{
   position: absolute;

   top: 0;
   left: 0;
   z-index: -1;
   content: "";
   background: var(--color-text-3);
   width: 100%;
   height: 100%;
   transform: skew(30deg);
   border-radius: 10%;
   
}
.section-left-bttom{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.section-left-bttom-right{
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.bottom{
    bottom: 50px;
    font-size: 10px;
}

/** end section center **/



/** start section about-web **/

.about-web{
    width: 100%;
    height: auto;
    background: var(--background);

}
.about-web-box{
    position: relative;
    width: 100%;
    height: 450px;
    display: flex;
    z-index: 1;
   

}
.about-web-box::before{
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%);
   
    width: 70px;
    height: 70px;
    transition: 0.5s;
    z-index: -1;
    
   

}
.about-web-box:hover:before{
    position: absolute;
    content: "";
    top: 0%;
    
    background: rgba(255, 255, 255, 0.425);
    width: 100%;
    height: 100%;
   

}
.about-web-box-img{
    width: 500px;
    height: 100%;
    background: white;
    display: flex;
}
.about-web-box-img img{
    width: 100%;
    height: 100%;
}
.about-web-box-text{
   padding: 50px;
   display: block;
   color: var(--background-3);
}

/** end about-web-box **/



/** start shoping **/
.section-top-btn{
    width: 70%;
    margin-top: 50px;
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.596);
    border-radius: 10px;
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.199);
}
.search-box{
    width: auto ;
   
    height: auto;
    border: 1px solid rgba(0, 0, 0, 0.295);
    border-radius: 5px;
    background: white;

}

.style-search{
    width: 200px;
    height: 40px;
    border: 0;
    outline: none;
    border-radius: 15px;
    padding: 15px;
    background-color: transparent;
    
}

.section-shoping-box{
    background: var(--background-2);
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.shoping{
    width: 100%;
    height: auto;
    padding: 50px;
    
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
    justify-content: center;
}
.shoping-box::before{
    position: absolute;
    content: attr(data-text);
    left: 0;
    top: 0;
    background: rgb(255, 115, 0);
    color:rgb(245, 176, 120) ;
    width: auto;
    padding: 8px 15px;
    height:auto;
}
.range{
    display: flex;
    justify-content: space-evenly;

  
}
.range p{
    font-size: 15px;
}
.range span{
    color: rgb(255, 115, 0);
}
.change{
    text-decoration: line-through;
    color: var(--color-text);
}


/** end shoping **/

/** start about-web-box-1 **/
.about-team{
    position: relative;
    width: 100%;
    height: 450px;
    background-color: rgb(209, 89, 89);
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}


.about-team-zindex{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    z-index: 1;
    width: 500px;
    height: 200px;
    background: rgba(0, 0, 0, 0.521);
    border-radius: 10px ;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--background);
    overflow: hidden;
}

/** end section about-web **/






/** start section box **/

.section-center-product{
    position: relative;
    padding: 50px;
    width: 100%;
    height: auto;
    background-color: var(--background-4);
}
.section-left-bttom-left{
    position: relative;
    overflow: hidden;
    width: 50%;
    height: 100%;
}

/** end section box **/

.chat{
    position: fixed;
    top: 80%;
    width: 55px;
    height: 55px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.397);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 1;
}
.footer-end{
    width: 100%;
    height: auto;
    padding: 30px;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}


.footer-end div ul{
    margin: 10px;
    list-style: none;
    text-wrap:nowrap;
    
}
.footer-end div h4{
    color: var(--color-text);
    padding: 5px 10px;
    
}
.about-info{
    display: flex;
    flex-direction: column;
}
.nav-footer{
    background:transparent;
    padding: 0px;
    margin-bottom: 5px;
}
.hidden-text{
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.26);
    color: var(--color-text);
}
@media (max-width:450px) {
    .top{
        padding: 5px 10px;
    }
    .start-help ul{
        flex-wrap: wrap;
       }
   .start-help a{
    font-size: 10px;
    margin: 0px 3px;
    padding: 0;
   }
   .section-center{
    flex-direction: column;
    height: auto;
    overflow: hidden;
   }
   .section-left{
    width: 343px;
    height: auto;
    
   }
   .section-center-product{
    overflow: hidden;
   }
   .font-text{
    font-size: 15px;
   }
   #shop{
    font-size: 0.7rem;
    padding: 0.205rem 0.45rem;
   }
   .section-left-text span{
    padding: 1px 1px;
   }
   .bottom{
    bottom: 0px;
   }
   .about-web-box{
    flex-direction: column;
    height: auto;
    overflow: hidden;
    
   }
   .about-web-box-img {
    width: 370px;
    height: 45%;

    }
    .about-web-box-text{
        padding: 10px 25px;
        font-size: 15px;
        font-weight: 900;
        text-wrap:nowrap;
    }
    .about-web-box-text h4{
        font-size: 18px;
    }
    .shoping{
        padding: 10px;
    }
  
   .section-right{
    width: 334px;
    height: auto;
   }
   .footer-end{
    display: flex;
    flex-direction: row;

   }
   .footer-end div{
    margin: 10px;
   }
   .footer-end div ul {
    margin: 0px 0px;
    
    
    font-size: 12px;
}
.footer-end div h4 {
    font-size: 19px;
    padding: 3px 0px;
}
.nav-top .logo-1 img {
    width: 35px;
    
}
.nav-top .logo-1 a{
    font-size: 20px;
}
.about-team{
    flex-direction: column;
    align-items: center;
}
.about-team-zindex{
    width: 400px;
    height: 250px;
}
.about-team img {
    width: calc(100% / 1);
}

}






/** end index **/






/** section box  **/







.product{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;


}
.product-top{
   
    margin:50px auto;
    width: 70%;
    height: auto;
    background-color: var(--background-input);
    padding: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: nowrap;

}



.product-top .more-product a{
    margin: 10px;
    color: var(--color-text);
    position: relative;
    padding: 1px 0px;
    display: inline-flex;
}
.product-top .more-product a:hover{
    border-color: var(--color-text);
}
.product-top .more-product a:visited{
    color: var(--color-text-3);
}
.product-center{
    padding: 0px 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}
.product-box{
    position: relative;
    z-index: 1;
    width: 220px;
    height: 340px;
    background-color: transparent;
    border-radius: 3px;
    margin: 15px 10px;
    transition: 0.5s;
    border: 1px solid var(--color-text);
 
   
}
.product-box::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background: var(--background-3);
    border-radius: 3px;
    transition: 1s;
}
.product-box:hover:before{
    width: 50%;

}

.product-box::after{
    content: "";
    position: absolute;
    right: 0%;
    bottom: 0;
    width: 0%;
    height: 2px;
    background: var(--background-3);
    border-radius: 5px;
    transition: 1s;
}
.product-box:hover::after{
    width: 50%;

}

.product-box-img{
    border-radius: 3px;
    width: 100%;
    height: 60%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    
    
}

.product-box a img{
    transition: .5s;
   
    width: 250px;


}

.product-box a img:hover{
    
 transform: scale(1.1);

}

.product-box-text{
    font-size: 12px;
    text-overflow: ellipsis;
    height: auto;
    padding: 10px 5px;
    
}
.product-box-text p{
    margin: 5px 15px;
}

.assess{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 20px;
    margin-top: 25px;
    padding: 5px;
}

.assess a{
    border-bottom: 1px solid transparent;
    color: var(--background-3);

}
.assess a:hover{
    border-color: var(--background-3);
}


.href-for{
    position: absolute;
    top: 10%;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: auto;
    z-index: 1;
    left: 90%;

}



.shop{
    display: flex;
    align-items: center;
    justify-content: center;
   margin-top: 10px;
    font-size: 10px;
}
.shop a{
    margin: 0px 10px;
}


/** end product **/