*{
    margin: 0;
    padding:0;
    list-style:none;
 box-sizing:border-box;
    overflow-x:hidden;
	text-decoration:none;
 
}

.container{
    padding: 0 15px;
    max-width:100vw ;
    height:100%;
    position:relative;
}

.container::before{
    content: "";
    background: linear-gradient(145deg , rgb(35, 35, 169) , rgb(145, 57, 71));
    width:100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    z-index:-1;

}

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
	z-index:33;
    margin-top:10px;
}
nav{
    flex:1;
    text-align: right;
}
nav ul {
    display: flex;
    justify-content:center;
    align-items:center;
}
nav  ul li{
    
    padding: 8px ;
    font-size: 1.4rem;
    color:#555;
    cursor:pointer;


}

a{
    color: white;
}

.logo{
    width:170px;
    margin-right: 50px;
    cursor:pointer;


}
.logo img{
    width:100%;
}

/* --------Hamburger------- */

.menu-btn{
    width: 80px;
    height:80px;
    
    /* position:relative; */
    display: none;
    justify-content: center;
    align-items: center;
    cursor:pointer;

}

.menu-btn_burger{
    width: 50px;
	overflow:visible;
    height: 3px;
    background-color:white;
    border-radius:5px;
    box-shadow: 0 2px 5px 0 rgb(49, 0, 140);
    transition: all .4s ease-in-out;
    position:relative;
}
.menu-btn_burger::after, .menu-btn_burger::before{
    content:"";
    width: 50px;
    height: 3px;
    background-color:white;
    border-radius:5px;
    box-shadow: 0 2px 5px 0 rgb(49, 0, 140);
    transition: all .4s ease-in-out;
    position:absolute;
    top:0;
    left:0;
}

.menu-btn_burger::after{
    transform: translateY(-16px);
}

.menu-btn_burger::before{
    transform: translateY(16px);
}
.menu-btn.open .menu-btn_burger{
    transform:translateX(-50px);
    background:transparent;
    box-shadow:none;
    
}
.menu-btn.open .menu-btn_burger::after{
    transform: rotate(45deg) translate(35px, -35px);
}

.menu-btn.open .menu-btn_burger::before{
    transform: rotate(-45deg) translate(35px, 35px);
}





/* ------Registration----- */

.sub-container{
    display: flex;
    justify-content: center;
    align-items: center;
	z-index:11;
}
.sub-container h2, label, option , select, .gend ,.yo-btn{
    color:black
}


.sub-container form h2{
font-weight: 500;
position:relative;
}
.sub-container h2::after{
    content: "";
    width:30px;
    height:2px;
    background: blue;
    position:absolute;
    bottom:0;
    left:0;
}

.sub-container hr{
    margin:30px 6px;
}

.sub-container form{
    max-width:700px;
    background:white;
    width:100%;
    padding:25px 20px;
    font-size:1.3rem;
    border-radius:8px;
    height:100%;
    margin-top:5%;
	z-index:22;

}
.sub-container span{
    display:block;
    color:black;
}

.sub-container   input:focus{
    color:black;
}
.sub-container form .form-detail{
display: flex;
    flex-wrap: wrap;
justify-content:space-between;    
}

.sub-container  .form-detail p{
     width:45%;
   margin-bottom:13px;


}
.sub-container  select{
    font-size: 1.4rem;
    margin: 10px 3px;
 

}

 .form-detail input, .form-detail select{
width: 100%;
    height: 42px;
    outline:none;
    border: 1px solid #0602ff;
    font-size: 1rem;
	border-radius:6px;
 border-bottom-width:3px;
padding-left:5px;
    transition:.3s ease;
}


.container-4{
    padding: 0 15px;
    max-width:100vw ;
    height:100%;
    position:relative;
    background: linear-gradient(45deg ,blue, transparent);
}


 
.btn{
width:100%;
    height: 50px;
    border: none;
    border-radius: 10px;
    background: rotate(135deg) pink, blue;
    background: 135deg , pink, blue;
    font-size: 1.5rem;
    background: linear-gradient(145deg, #ffeb3b, #5198b3);
	cursor:pointer;
	transition:1s ease; 
   margin: 20px 4px ;
}

.btn:hover{
    background: linear-gradient(-145deg, #ffeb3b, #5198b3);
}
input[type="search"]{
    height: 30px;
    padding-left: 10px;
    outline: none;
    border-radius: 5px;
}
.btn-ser{
    padding:5px 15px;
    outline: none;
    background: rgb(39, 39, 172);
    font-size: 1.3rem;
    border-radius: 10px;
	color:white;
	font-weight:200;

}

.circle{
    border: 8px solid blue;
    margin: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.row{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.col-2{
    width:50%;
   padding-top:100px;

}
.col-2 img{
    width:100%;
}
.col-2 h2{
    line-height: 1.5;
    margin-bottom: 15px;
    font-size: 1.6rem;
    font-weight: normal;
    font-family: cursive;
    margin-top:50px;
    color: #2cf7f6;
}
.col-2 p{
    font-size: 14px;
    line-height: 1;
    color:white;
}
.sm-btn{
    border: 2px solid blue;
        padding: 10px 20px;
        margin: 35px 0;
        display: inline-block;
        border-radius: 10px;
        background: #2924a3;
        font-size: 1.3rem;
}
.sm-btn:hover{
    background: #64306f;
    border: 2px solid #672f65;
}
 
/* ----Product----- */

.row2{
    display: flex;
    
    overflow: auto;
    align-items: center;
}
.row2::-webkit-scrollbar{
    width:0;
}
.button-2{
    position: relative;
}
.button-2 .left-2,.button-2 .right-2{
    position: absolute;
    top: 0px;
    width: 78px;
    background: transparent;
    height: 100%;
    border: none;
    font-size: 4rem;
    color: rebeccapurple;
    cursor:pointer;

}
.button-2 .right-2{
    right:0;
    border-bottom-left-radius: 75%;
    border-top-left-radius: 75%;


}
.button-2 .left-2{
    left: 0px;
    border-bottom-right-radius: 75%;
    border-top-right-radius: 75%;

}
.left-2:hover{
    background:rgb(63 81 181 / 23%);
    color: white;
}
.right-2:hover{
    background: rgb(63 81 181 / 23%);
    color: white;
}







.product{
    margin-top:50px;
    margin: auto;
    width: 98%;
}


*{
    margin:0;
    padding:0;

}
 
a{
    text-decoration: none;

}
.box{
    margin-right:65px;
    min-width:300px;
    box-shadow:2px 3px 30px rgba(0,0,0,0.2);
    border-radius: 10px;
    overflow: hidden;}

.slide-img{
    height:450px;
    position: relative;
    overflow: hidden;
}
.slide-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    box-sizing:border-box;
}

.detail-box{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    box-sizing: border-box;
    font-family: calibri;
    background-color: #ffc0cb30;

}

.type{
    display: flex;
    flex-direction: column;
}

.type a{
    color: #222222;
    margin: 5px 0px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding-right: 9px;
}
.type span{
    color:rgba(26,26,26,0.5);

}
.price{
    color: #333;
    font-weight: 300;
    font-size: 1.1rem;
    font-family: poppins;
    letter-spacing: 0.5px;
}

.overlay{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: rgba(92,95,236,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
}

.buy-btn{
    width: 100px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #FFFFFF;
        color: #252525;
        font-weight: 700;
        letter-spacing: 1px;
        font-family: calibri;
        border-radius: 20px;
        box-shadow: 2px 2px 30px rgb(0 0 0 / 20%);
    }



.buy-btn:hover{
    color:#FFFFFF;
    background: #f15fa3;
    transition: al .3s ease ;
}

.slide-img:hover .overlay{
    visibility: visible;
    animation: fade 0.5s;

}
@keyframes fade{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.button{
    position: relative;
}
.button .left,.button .right{
    position: absolute;
    top: 0px;
    width: 78px;
    background: transparent;
    height: 100%;
    border: none;
    font-size: 4rem;
    color: rebeccapurple;
    cursor:pointer;

}
.button .right{
    right:0;
    border-bottom-left-radius: 75%;
    border-top-left-radius: 75%;


}
.button .left{
    left: 0px;
    border-bottom-right-radius: 75%;
    border-top-right-radius: 75%;

}
.left:hover{
    background:rgb(63 81 181 / 23%);
    color: white;
}
.right:hover{
    background: rgb(63 81 181 / 23%);
    color: white;
}





.col-un{
    min-width:200px;
    margin:5px;
}
.col-un img{
    width:100%;
    max-width: 200px;
}
.row2 h3{
    font-weight: 100;
    margin: 3px 0;
    color: #872929;
}
.row2 p{
    font-size: 14px;
    color: #555
}

.rating{
    font-size: 17px;
    color:red;
    padding-top: 6px;

}
.title{
    text-align: center;
    margin: 25px;
    text-transform: uppercase;
    font-weight: 300;
    font-family: sans-serif;
}
.offer .row p{
font-size:1rem;
line-height:2;
color:red;}

.offer{
    padding: 10px;
    background: radial-gradient(white, pink);
    margin:50px 0;
}
.offer small{
	color:#b31f08;}

.offer h3{
    font-size: 2rem;
    margin: 30px 0;
    font-weight: normal;

}

.container2{
    max-width: 100vw;
    
    padding: 20px;
}
.man{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.col-3{
    width:30%;
    text-align: center;
    padding: 5px;
    margin: 10px;

}
.testimoneal .col-3:hover{
    transform: translateY(-10px);
}
.testimoneal .col-3{
    box-shadow: 0 2px 5px 0 #00000099;
}
.col-3> img{
    width: 75px;
    border-radius: 50%;
    margin: 16px 0;
    box-shadow: 0 2px 5px #000000d1;

}
.col-7{
    max-width: 100%;
    margin: 5px;
}
.col-7 img{
    max-width: 200px;
    width: 100%;
}

.client{
    margin: 50px 0;
    background: radial-gradient(#bbbbbb, transparent);
    border-radius: 40px;
}

.content{
    background: black;
    color: #ddd;
}
.ww6{
    width:53%;
    display: flex;
    justify-content: space-around;
    margin: 30px ;
}
.ww3{
    width:25%;
    margin: 30px ;
    
    display: flex;
    justify-content: space-around
}
.col-a, .col-b{
    width: 50%;
    margin: auto;
    padding: 10px;
}
.col-c, .col-d{
    width: 42%;
    margin: auto;
}

.content h5 {
    /* text-align: center; */
    font-size: 17px;

}
.content ul {
    display: block;
    list-style: none;

}
.content .row img{
    width: 220px;
        margin: 20px 5px;
}
.col-a img{
    width: 95px ;
}
.col-b img{
    width: 75%;
        margin: auto;
}

hr{
    margin: 30px 0;
}


footer{
    text-align: center;
    margin: auto;
    padding-bottom:10px;
}





/* -------Prodct------- */

.man-3{
    
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    
}

.col-3 .img img{
    width:100%;
    max-width: 350px;
}

.left-t{
    font-size: 2rem;
    margin: 30px 0;
}
.w-50{
    margin-top: 50px;
}
.product-1 .col-3 h5 {
    font-size: 1.4rem;
    border: 1px solid pink;
    margin: 10px 20px;
    padding: 10px 15px;
    background: #46a7b7bf;
    font-weight: normal;
}

.product-1 .col-3 h5:hover {
    background: skyblue;

}
  .col-4{
    width: 25%;
    margin:auto;
    padding: 20px 10px;
}
.col-4 h4{
    font-size: 1.1rem;
    font-weight: normal;
    margin: 2px;
}
.product-2 .col-4 img{
width:100%;

}

 

.page-btn span{
    width: 51px;
        height: 50px;
        border: 1px solid #ed4343;
        display: inline-block;
        line-height: 2.7;
        text-align: center;
}


.page-btn span:hover{
    background-color: #ed4343;
    color: white;
}
.nam{
    display: flex;
}
.nam img{
    margin-right: 5px ;
}

.container4{
    background: rgb(220, 220, 220);
    width:100%;
    height:100%;
    overflow: hidden;

}

.single-product{
    margin-top:80px;

}
.single-product .col-2 img{
    padding:0px;
}
.single-product .col-2{
    padding:20px;
}
.small-img-row{
    display: flex;
    justify-content: space-between;
}
.small-img-col{
    flex-basis: 24%;
    cursor: pointer;
}
.single-product .col-2 p {
    font-size: 0.78rem;
    line-height: 1;
    color: white;
    margin-top:10px;
}


.single-product h1{
    margin: 50px 0;
        font-size:3rem;
        font-weight: bold;
        line-height: 1.6;

}
.single-product select{
    display: block;
    margin: 20px 0;
    padding: 10px;

}
.single-product input{
    padding-left: 10px;
    width: 40px;
    height:40px;
    font-size:20px;
    margin-right:10px;
    border: 1px solid #ff523b;
    outline:none;
}
.single-product .btn{
    margin-left: 50px;
}
 


/* accout-page  */
.account-page{
    padding: 55px 0;
    background: radial-gradient(#c859db, pink);
}

.form-container {
    background: white;
    width: 300px;
    height: 400px;
    position: relative;
    text-align: center;
    padding: 20px 0;
    margin: auto;
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 50%);
}


.form-container span{
    font-weight: bold;
    padding: 0 14px;
    color: #555;
    cursor: pointer;
    width: 100px;
    display: inline-block;
}

.form-btn{
    display: inline-block;
}
.form-container form{
    max-width: 300px;
        padding: 0 20px;
        position: absolute;
        top: 130px;
}
 .form-container form    input{
    width: 100% ;
    height: 30px ;
    margin: 10px 0;
    padding: 0 10px ;
    border: 1px solid #ccc;

}
.form-container  form .btn{
    font-size:1rem;
    height:auto;

}
.form-container form label{
    margin-left:15px;
}

#LoginForm{
    left:-300px;
}
#RegForm{
    left:0;
}
.form-container form a{
    font-size: 14px;
}
.form-btn hr{
    transition: all 1s ease-in-out;
    width: 100px;
        border: none;
        background: red;
        height: 3px;
        border: 5px;
        margin-top: 8px;
        transform:translateX(100px);
}