*{margin: 0;padding: 0;font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
a{
    cursor: pointer;text-decoration: none;color: black;
}
.container{
    width: 100%;
    margin: 0px auto;
    
}
.frame1{
    width: 100%;
    height: 38px;
    background-color: black;display: flex;justify-content: center;align-items: center;gap: 7px;
}
.frame1 p {font-size: 14px;font-weight: 400;color: white;}
.frame1 a {
    color: white;font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 500;
    font-size: 14px;
}
.framep{
    position: relative;left: 504px;
}
.nav{
    height:41px;
    width:85%;
    /* background-color: #F2F0F1; */
    margin: 30px auto;
    display: flex;
    justify-content: space-around;align-items: center;
}
.SHOP{
    font-weight:700;font-size: 38px;line-height: 100%;
}
.navlist{
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;gap: 20px;
}
.search{
    height: 48px;
    width: 577px;
    background-color: #F0F0F0;
    border-radius: 50px;border: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;gap: 10px;
}
.icon{
    width: 62px;
    height: 24px;background-color: transparent;border: none ;cursor: pointer;
}
.homepage{
    cursor: pointer;text-decoration: none;color: black;
}
.T-{font-weight: 500;}
.search input:focus{
    outline: none;font-size: 16px;
}
hr{
 width: 88%;margin: 0px auto;
}
.main{
    display: flex;height: 530px;width: 100%;justify-content: center;gap: 30px;margin-top: 40px;

}
.mainpic{
    height: 100%;width: 44%;display: grid;grid-template-columns:1fr 3fr ;
    grid-template-rows:repeat(3,170px);gap: 10px;
}
.img{
    height: 100%;
    width: 100%;
}
.img img{
    /* width: 100%; */
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
.l{
    height: 530px;width: 100%;grid-column:2/3;grid-row: 1/3;
}
.l img{
    object-fit: cover;width: 100%;
}
.text{
    width: 44%;
    height: 100%;

}
.text h1{
    font-size: 48px;
    font-weight: 900;

}
.price{
    height: 45px;
    width:179px;
    display: flex;
    gap: 20px;margin-top: 12px;

}

.price span:nth-child(1){ font-size: 32px;font-weight:700;
   
}
.price span:nth-child(2){
    font-size: 32px;font-weight: 700;color: gray;
    text-decoration: line-through;
}
.text hr{
    margin:15px 0px 15px 0px;width: 100%
}
.size{
    height: 46px;width: 420px;display: flex;justify-content: space-around;margin-top: 15px;
}
.size div:nth-child(1){
    height: 46px;width: 86px;background: #F0F0F0;border-radius:50px;color: gray;text-align:center;line-height: 46px;

}
.size .di:nth-child(3){
    height: 46px;width: 86px;background: black;border-radius:50px;color:white;text-align: center;line-height: 46px;cursor: pointer;}
.size .di:nth-child(2),.di:nth-child(4){
    
    height: 46px;width: 86px;background: #F0F0F0;border-radius:50px;color: gray;text-align:center;line-height: 46px;cursor: pointer;
}
.textlast{
   display: flex;gap: 58px;

}
.Quantity{display: flex;justify-content: space-around;align-items: center;height: 52px;width: 26%;border-radius: 50px;background: #F0F0F0;cursor: pointer;}
.Quantity p:nth-child(1),p:nth-child(3){font-size: 30px;font-weight: 500;}
.addcart{height: 52px;
    width: 70%;background-color: black;border-radius: 50px;text-align: center;line-height: 52px;color: white;cursor: pointer;

}
.name{
    display: flex;
    justify-content: space-around;width: 88%;margin: 0px auto;gap: 50px;margin-top: 60px;
}
.name p{
    color: black;
    font-size: 20px;width:33%;text-align: center;cursor: pointer;
}
.img:hover{
    cursor: pointer;scale: 102%;
}
.review{
    width: 88%;margin: 0px auto;display: flex;
    justify-content: space-between;
    /* border: 1px solid black; */
}
.review h2 small{
font-size: 14px;color:gray
}
.inreview{
    display: flex;justify-content: center;gap: 20px;
}
.comment{
    height: 750px;width:88%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 240px 240px 240px;margin: 30px auto;gap: 20px;
}
.incomment{
    height: 100%;width: 100%;
    border: 1px solid rgb(135, 124, 124);
    border-radius: 20px;padding:30px;box-sizing: border-box;display: flex;flex-direction: column;gap: 10px;
}
.loadmore{
    width: 230px;
    height: 52px;
border-radius: 50px;
line-height: 52px;
text-align: center;border: 1px solid #0000001A;margin: 30px auto;font-weight: 500;margin-left: 43%;transition: all 1s linear;
}
.loadmore:hover{
    background-color: black;color: white;scale: 110%;
}
.box{
    /* display: flex;
    justify-content: space-around;
    align-items: center; */
    height: 395px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4,22%);
    grid-template-rows:298px 97px;
    /* grid-template-areas: "img1" "img2" "img3" "img4", "txt1" "txt2" "txt3" "txt4"; */
    gap: 22px;justify-content: center;
}
.innerbox{
    height: 100%;
    width: 100%;
    background-color: #F0EEED;border-radius: 20px;
}
.innertxt{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.innertxt h3{height:27px;font-weight: 700;text-transform:capitalize;}
.innertxt p{
    font-style: bold;
    font-weight: 500;font-size: 27px;line-height: 22px;
}
.lastblack{
    height: 180px;
    width: 90%;background-color: black;border-radius: 20px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;position: relative;top: 90px;
}
.headblack{
     height:94px;width:551px;font-size:40px;font-weight: 900; color: white;padding: 40px;margin-left:50px;
}
.gmail{
    height:110px;width: 360px;margin-right: 60px;
    ;
}
.email{
    width: 100%;
    height: 48px;
    border-radius: 50px;
    background-color: white;
    padding-left: 30px;
    box-sizing: border-box;outline: none;
}
.btne:hover{
    background-color: black;scale: 102%;
    color: white;border: 1px solid white;
}
.gmail button{height: 48px;
    width: 100%;
    border-radius: 50px;
    background-color: white;margin-top:10px;
    font-weight: 500;

}
.last{
    height: 500px;
    width: 100%;
    background: #F0F0F0;padding-top: 140px;box-sizing: border-box;

}
.footer{
    height: 180px;
    width: 90%;
    margin: 0px auto;
    display: grid;
    grid-template-columns: 250px 104px 136px 150px 150px;
    gap: 120px;

}
.fbox{
    width: 100%;
    height: 100%;
position: relative;
}
.fbox h1{
    margin-bottom: 10px;font-weight:900;
}
.fbox span{font-size: 14px;color: gray;margin-top: 20px}
.fbox div{
    /* position: absolute; */
    margin-top: 0px;  display: flex;gap:4px;
    
}
.fbox .p1{
    letter-spacing: 2px;font-family: 500;color:black;font-size:17px;
}
.fbox p {
    margin-top: 15px;color: gray;font-size: 15px;
}
.card{display: flex;justify-content: space-around;}