*{margin: 0;padding: 0;font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
a{text-decoration: none;color: black;cursor: pointer;}
button{cursor: pointer;}
.over{
    background-color: rgb(252, 249, 249);
    height: 100%;
    width: 100%;
    position: fixed;
    top:0px;
    left: 0px;
    animation: op 0.5s linear forwards;
    pointer-events: none;
    z-index: 99999;
}
@keyframes move{
    from{
        transform: translateX(-100%);
    }
    to{
        transform: translateX(100%);overflow: hidden ;
    }
}
.brandname div{
    animation: move 8s infinite linear;
}

@keyframes op{from{opacity: 1;}
to{opacity: 0;}
}
.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;cursor: pointer;border: none;background-color: transparent;
}
.search input:focus{
    outline: none;font-size: 16pxpx;
}
.btne{width: 100%;background-color: black;border: 1px solid white;}
.btne:hover{background-color: black;}
.grid{
    display: grid;grid-template-columns: 3fr 2fr;width: 88%;gap: 20px;margin:20px auto;
}
.ingrid1{
    height:550px;
    width: 100%;border-radius: 20px;border: 1px solid rgba(0,0,0,0.5);padding: 20px;box-sizing: border-box;
}
.box1{
    display: flex;
    justify-content: center;gap: 10px;
}
.box1 .indiv{
    width: 65%
}
.inbox{width: 20%;}
.box1 .indiv p{margin-top:1px;font-weight:400;word-spacing: 5px;}
.box1 img{border-radius: 10px;}
.box1 .indiv p small{
    color: gray;
}
.box1 .indiv p:nth-child(4){
    font-size: 30px;font-weight: 600;
}
.end button img , .end button{border: none;
    filter:contrast(6)
}
.end{
    display: flex;flex-direction: column;justify-content: space-between;width:20% ;align-items: end;
}
.Quantity{display: flex;justify-content: space-around;align-items: center;height: 52px;width:100%;border-radius: 50px;background: #F0F0F0;cursor: pointer;}
.Quantity p:nth-child(1),.p:nth-child(3){font-size: 30px;font-weight: 500;}
.ingrid2{
    border: 1px solid gray;border-radius: 20px;padding: 20px;box-sizing: border-box;width: 100%;height: 480px;
}
.summary{
    display: grid;grid-template-columns: 80% 20%;
    grid-template-rows: 30px 30px 30px;gap: 20px;margin-top: 30px;margin-right: 20px;
}
.pp{
    width: 100%;height: 100%;font-size: 20px;
}
.pp:nth-child(1),.pp:nth-child(3),.pp:nth-child(5){
    color: gray;
}
.pp:nth-child(4){color: red;}
.pp:nth-child(2),.pp:nth-child(4),.pp:nth-child(6){
    text-align: end;font-weight: 500;
}
.inp::placeholder{padding-left: 30px;background-image: url(./images/Vector.png);background-position: left;background-repeat: no-repeat;background-size:contain;}
.promo{display: flex;justify-content: center;gap: 10px;margin:30px 0px 30px 0px}
.inp{width: 70%;border: none;outline: none;height: 48px;border-radius: 50px;background: #F0F0F0;padding-left: 20px;font-size: 18px;
}
.btnpromo{
    width: 30%;background-color: black;border-radius: 50px;height: 48px;color: white;border: none;
}
.lastbtn{background-color: black;border-radius: 50px;border: none;color: white;font-weight: 500;width: 100%;height: 60px;text-align: center;line-height: 60px;display: flex;justify-content:center;align-items: center;}
.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;
}
.gmail button{height: 48px;
    width: 100%;
    border-radius: 50px;
    background-color: white;margin-top:10px;
    font-weight: 500;
    transition: all 0.5s linear;

}
.gmail button:hover{color: white;background-color: black;}
.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;}