@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap'); */

*{
    padding: 0;
    margin: o;
    box-sizing: border-box;
    font-family:   "Merriweather Sans", sans-serif;
}
.sec1{
    background: url(./images/PHOTO-2025-08-31-18-45-47.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}   
nav{
    background-color: grey;
    color: #fff;
}

.atag{
    margin-right: auto;
    color: white;
}
.atag> a{
    /* /* color: rgb(35, 74, 190); */
    color: black;
    padding-right: 1.5rem;
    text-decoration: none;
      text-transform:capitalize ;
}
.about {
    color: rgb(94, 127, 224);
    border: 2px solid;
    border:none;
    background-color: black;
    padding: 7px;
    /* margin-top: 260px; */

    
}
.about>h2{
    width: 320px;
}
.shop{
    width: 300px;
    font-size: small;
}
.btf{
    padding-right: 48px;
    /* color: rgb(35, 74, 190); */
    font-weight: bolder;
    font-size: larger;
    
}
.mail-bar > a{
    /* color: rgb(35, 74, 190); */
    color: black;
    padding-right: 12px;
}
.nav-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 15px;

}
.about > button{
    background-color: rgb(94, 127, 224);
    padding: 3px;
    color: #ccc;
    border: none;
    border-radius: 20px;
    font-weight: lighter;
    width: 135px;
    height: 35px;
    cursor: pointer;

}
.about>.wel{
    font-size: 13px;
    color: rgb(94, 127, 224);
    margin-top: 10px;
}
a> span{
    font-size: 10px;
}
.card1{
     border: 1px solid black;
    /* box-shadow: 0 0 9px; */
    background-color: grey;
    border-radius: 10px;
    color: rgb(13, 61, 207);
    /* padding: auto; */
    height: 60vh;
    width: 50vh;
    border: none;
    text-align: center;
    font-size: 15px;
    /* margin: auto; */
    /* display: flex; */
    /* flex-direction: column; */
    /* gap: 1rem; */
}
.why{
    padding-right: 3px;
}
.discount{
    position: relative;
    top: 8px;
    /* left: 10px; */
    background: rgb(35, 74, 190);
    color: red;
    font-size: 14px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    width: 50px;

}
.favourite{
    position: relative;
    bottom: 12px;
    left: 80px;
    font-size: 20px;
    color: rgb(35, 74, 190);

}
.all{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.sec3{
    text-align: center;
    color: rgb(35, 74, 190);
}
.favourite:hover{
    color: white;
}
.product-card{
    border: 1px solid;
    background-color: grey;
    /* background-color: #f5f5dc; */
    width: 200px;
    border-radius: 8px;
    text-align: center;

}
.card1 > img{
    max-width: fit-content;
    width: 315px;
}
.sec2{
    display: flex;
    flex-direction: row;
     align-items: center;
    justify-content: center;
    gap: 2rem;
    /* margin-top: 40px; */
    background-color: white;
    height: 70vh;
    margin-top: 3.5rem;
}
.title{
    color: rgb(94, 127, 224);
}
.line{
    text-decoration: line-through;
    color: red;
    font-size: 13px;
}
.name > .fa-solid{
    color: gold;
}
.name > .fa-regular{
    color: #ccc;
}
.prod{
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 18px;
}
.sec4{
    /* background-color: grey; */
}
.name{
    text-align: center;
}
.sec3{
    margin-top: 90px;
}
.prods{
    text-align: center;
    font-style: italic;

}
.view{
    color: rgb(94, 127, 224);
}
.prods i{
    font-size: 12px;
}
.combo1{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    margin-top: 5rem;
    background-color: black;
    height: 70vh;
}
.combo{
    width: 500px;
}
.combo3{
    color: grey;
}
.combo3 > button{
    background-color: grey;
    height: 30px;
    width: 110px;
    border: none;
}
.stock{
    /* display: flex; */
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    margin: 15px 0;
}
.sold{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.progress{
    height: 100%;
    background: gold;
    width: 85%;
}
.progress-bar{
    width: 100%;
    height: 11px;
    background: #ddd;
    border-radius: 5px;
    overflow: hidden;
}
.smart{
    display:flex;
    justify-content: center;
    align-items: center;
    /* background-image: url(./images/PHOTO-2025-08-31-17-49-18.jpg); */
    background-color: grey;
    /* background-repeat: no-repeat; */
    background-size: contain;
    gap: 2rem;
    margin-top: 5rem;
}
.smart h1{
    width: 500px;
}
.smart1 p{
    width:300px;
}
.smart{
    color: rgb(255, 253, 253)
    /* color: rgba(73, 8, 151, 0.541); */
}
.smart1 button{
    background-color: rgb(255, 253, 253);
    border-radius: 20px;
    height: 30px;
    width: 100px;
    border: none;
}
.pdo{
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns:repeat(5, 1fr);
    column-gap: 1rem;
    /* flex-direction: column; */
    /* column-count: 3; */

}
.discount2{
     position: relative;
    top: 8px;
    /* left: 10px; */
    background: rgb(35, 74, 190);
    color: white;
    font-size: 14px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    width: 50px;

}
.d-block{
    /* width: 130vw; */
    height: 70vh;
    /* max-width: 00px; */
}
.hmm{
    /* width: 50px; */
    border: 2px solid;
    border: none;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}
.view2{
    position: relative;
    bottom: 10px;
}
.view4{
    font-weight: 400;
    margin-bottom: 25px;
}
.sec6{
    margin-top: 4rem;
}
.progress{
    background-color: red;
    color: red;
}
.blog{
    display: flex;
    justify-items: center;
    align-items: center;
    text-align: center;
    margin-left: 200px;
    gap: 2rem;
}
.top{
    width: 300px;
    color: grey;
    margin-top: 1rem;
}

.top2{
    max-width: 300px;
    color: grey;
    margin-top: 1rem;
    padding: 5px;
}
.only{
    border: 2px solid;
    background-color: whitesmoke;
    border: none;
    gap: 1rem;

}
.blog2{
    text-align: center;
    color: grey;
}
.sec7{
    margin-top: 4rem;
}
.feb{
    display: flex;
    justify-content: center;
    gap: 6px;
    color: rgb(107, 91, 91);
    font-size: small;

}
.subscribe{
    display: flex;
    justify-content: center;
    margin-top: 18px;
}
.subscribe > input {
    padding: 5px;
    border: none;
    border-radius: 20px 0 0 20px;
    width: 360px;
    height: 40px;
    outline: none;
}
.subscribe button{
    background-color: rgb(35, 74, 190);
    border-radius: 0 25px 25px 0;
    color: white;
    width: 100px;
    height: 40px;
    border: none;
    /* padding: 12px 12px; */
}
.sub{
    display: flex;
    justify-content: space-around;
    background-color: black;
    margin-top: 70px;
    padding: 1rem;
}
.sub2{
    color: white
}
.best-at{
    display: flex;
    justify-content: center;
    padding: none;
    gap: 3rem;
    align-items: center;
    position: relative;
    text-align: center;
    top: 2rem;
    font-size: 14px;
    /* margin-top: 3rem; */
}
footer{
    background-color: rgb(107, 91, 91);
    height: 70vh;
}
.last{
    text-align: center;
    margin-top: 6rem;
}
.last p{
    width: 800px;
    text-align: center;
    margin: auto;
}
.socials{
    display: flex;
    gap: 1rem;
    /* text-align: center; */
    justify-content: center;
    margin-top: 1rem;
    cursor: pointer;
}
.policy{
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.2rem;
    font-size: 13px;
}