* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


:root {

    --pink: #e56f88;

    --dark: #1d2945;

    --light-pink: #fff0f2;

}


body {

    font-family: "Poppins", sans-serif;

    color: var(--dark);

    background: white;

}


html {

    scroll-behavior: smooth;

}


/* TOP BAR */

.top-bar {

    height: 40px;

    background: #f5b6bd;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 4%;

    font-size: 13px;

}


.top-bar span {

    color: #c94d68;

}


.top-contact {

    display: flex;

    gap: 18px;

    align-items: center;

}


.top-contact i {

    font-size: 16px;

}


/* NAVBAR */

.navbar {

    height: 90px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 4%;

    background: white;

}


.logo img {

    width: 145px;

    height: auto;

}


nav {

    display: flex;

    gap: 38px;

}


nav a {

    text-decoration: none;

    color: var(--dark);

    font-size: 14px;

    font-weight: 500;

}


nav a:hover,

nav a.active {

    color: var(--pink);

}


.nav-right {

    display: flex;

    align-items: center;

    gap: 20px;

}


.search-box {

    width: 280px;

    height: 40px;

    border: 1px solid #ddd;

    border-radius: 25px;

    display: flex;

    align-items: center;

    padding: 0 15px;

}


.search-box input {

    border: none;

    outline: none;

    width: 100%;

    font-family: inherit;

}


.nav-icon {

    font-size: 22px;

    cursor: pointer;

}


.bag-icon {

    position: relative;

    font-size: 22px;

}


.bag-icon span {

    position: absolute;

    top: -10px;

    right: -10px;

    background: var(--pink);

    color: white;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    font-size: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* MOBILE MENU */

.mobile-menu {

    display: none;

}


/* HERO */

.hero {

    max-width: 1380px;

    margin: 20px auto 0;

    min-height: 355px;

    border-radius: 18px;

    overflow: hidden;

    background: #fff0f1;

    display: grid;

    grid-template-columns: 1fr 1.2fr 1fr;

    align-items: center;

    position: relative;

}


.hero::before {

    content: "";

    position: absolute;

    width: 200px;

    height: 200px;

    background: #f7c1c6;

    border-radius: 50%;

    top: -120px;

    left: -70px;

}


.hero-logo {

    display: flex;

    justify-content: center;

    z-index: 1;

}


.hero-logo img {

    width: 270px;

    max-width: 90%;

}


.hero-content {

    z-index: 1;

}


.hero-content h1 {

    font-size: 34px;

    line-height: 1.35;

    margin-bottom: 20px;

}


.hero-content h1 span {

    color: var(--pink);

}


.hero-content p {

    font-size: 17px;

    line-height: 1.8;

    margin-bottom: 20px;

}


.hero-content button {

    background: var(--pink);

    border: none;

    color: white;

    padding: 13px 32px;

    border-radius: 25px;

    font-weight: 600;

    cursor: pointer;

}


.hero-content button:hover {

    transform: scale(1.05);

}


.dots {

    margin-top: 30px;

    display: flex;

    gap: 8px;

}


.dots span {

    width: 10px;

    height: 10px;

    background: #f3b8c0;

    border-radius: 50%;

}


.dots .active-dot {

    background: var(--pink);

}


.hero-image {

    height: 100%;

    display: flex;

    align-items: end;

    justify-content: center;

}


.hero-image img {

    width: 100%;

    height: 355px;

    object-fit: cover;

    object-position: center;

}


/* CATEGORIES */

.categories {

    max-width: 900px;

    margin: 20px auto;

    display: flex;

    justify-content: space-around;

    text-align: center;

}


.category-icon {

    width: 78px;

    height: 78px;

    border-radius: 50%;

    background: #ffe5e7;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 34px;

    margin: auto;

}


.category p {

    margin-top: 8px;

    font-size: 14px;

}


/* PRODUCTS */

.products-section {

    max-width: 1300px;

    margin: 25px auto;

    padding: 0 20px;

}


.section-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 15px;

}


.section-heading h2 {

    font-size: 22px;

    text-align: center;

    flex: 1;

}


.section-heading a {

    color: var(--pink);

    text-decoration: none;

}


.products-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;

}


.product-card {

    border: 1px solid #e5e5e5;

    border-radius: 12px;

    overflow: hidden;

    background: white;

    transition: 0.3s;

}


.product-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

}


.product-image {

    height: 270px;

    position: relative;

    overflow: hidden;

    background: #eee;

}


.product-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.wishlist {

    position: absolute;

    top: 10px;

    right: 10px;

    width: 35px;

    height: 35px;

    border: none;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.9);

    font-size: 22px;

    cursor: pointer;

}


.product-card h3 {

    font-size: 14px;

    padding: 12px 10px 5px;

}


.product-details {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 5px 10px 12px;

}


.current-price {

    color: var(--pink);

    font-weight: 600;

    font-size: 17px;

}


.product-details del {

    color: #999;

    font-size: 11px;

    margin-left: 5px;

}


.discount {

    color: var(--pink);

    font-size: 11px;

    margin-left: 5px;

}


.rating {

    background: #f3f8f3;

    padding: 4px 7px;

    border-radius: 15px;

    font-size: 11px;

    color: #188044;

}


/* ADD TO CART */

.add-cart {

    width: calc(100% - 20px);

    margin: 0 10px 12px;

    padding: 10px;

    border: none;

    background: var(--pink);

    color: white;

    border-radius: 20px;

    cursor: pointer;

}


/* FEATURES */

.features {

    background: #fff1f2;

    padding: 22px 7%;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

}


.feature {

    display: flex;

    gap: 15px;

    align-items: center;

}


.feature i {

    color: var(--pink);

    font-size: 28px;

}


.feature strong {

    font-size: 14px;

}


.feature p {

    font-size: 12px;

    margin-top: 4px;

}


/* ABOUT */

.about,

.contact {

    text-align: center;

    padding: 50px 20px;

}


.about h2,

.contact h2 {

    margin-bottom: 15px;

}


.about p,

.contact p {

    max-width: 600px;

    margin: auto;

}


.contact button {

    margin-top: 20px;

    padding: 12px 25px;

    border: none;

    border-radius: 25px;

    background: #25d366;

    color: white;

    cursor: pointer;

    font-size: 15px;

}


/* FOOTER */

footer {

    background: var(--dark);

    color: white;

    text-align: center;

    padding: 20px;

    font-size: 13px;

}


/* RESPONSIVE */

@media (max-width: 1100px) {


    nav {

        gap: 15px;

    }


    .search-box {

        width: 200px;

    }


    .products-grid {

        grid-template-columns: repeat(2, 1fr);

    }


}


@media (max-width: 768px) {


    .top-bar {

        font-size: 10px;

    }


    .top-bar > div:nth-child(2) {

        display: none;

    }


    .navbar {

        display: none;

    }


    .mobile-menu {

        display: flex;

        height: 70px;

        align-items: center;

        justify-content: space-between;

        padding: 0 20px;

    }


    .mobile-menu img {

        width: 120px;

    }


    .mobile-icons {

        display: flex;

        gap: 15px;

    }


    .hero {

        margin: 10px 15px;

        grid-template-columns: 1fr;

        padding: 35px 20px;

        text-align: center;

    }


    .hero-logo {

        margin-bottom: 20px;

    }


    .hero-logo img {

        width: 200px;

    }


    .hero-content h1 {

        font-size: 25px;

    }


    .hero-content p {

        font-size: 14px;

    }


    .hero-image {

        margin-top: 25px;

    }


    .hero-image img {

        height: 300px;

        border-radius: 15px;

    }


    .dots {

        justify-content: center;

    }


    .categories {

        overflow-x: auto;

        gap: 25px;

        justify-content: flex-start;

        padding: 0 20px;

    }


    .category {

        min-width: 85px;

    }


    .products-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 12px;

    }


    .product-image {

        height: 220px;

    }


    .product-details {

        display: block;

    }


    .rating {

        display: inline-block;

        margin-top: 5px;

    }


    .features {

        grid-template-columns: repeat(2, 1fr);

        padding: 25px;

    }

}


@media (max-width: 450px) {


    .top-contact {

        display: none;

    }


    .products-grid {

        grid-template-columns: 1fr 1fr;

    }


    .product-card h3 {

        font-size: 12px;

    }


    .current-price {

        font-size: 15px;

    }


    .discount {

        display: block;

        margin-left: 0;

    }


    .features {

        grid-template-columns: 1fr;

    }

}