/*====================================
            HERO SECTION
=====================================*/

.hero{

    position:relative;

    text-align:center;

    padding:120px 20px 180px;

    background:

        url("../images/background.0a984843141c.png")

        center top

        / cover

        no-repeat;

    margin-bottom:-40px;

}


.hero::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:180px;

    background:linear-gradient(
        to bottom,
        rgba(255,250,252,0),
        #fffafc 90%
    );

    pointer-events:none;

}


.hero h2{
    font-size:52px;
    color:#ff4f87;
    margin-bottom:20px;
}

.hero p{
    max-width:700px;
    margin:0 auto 40px;
    font-size:22px;
    color:#666;
    line-height:2;
}

/*====================================
        PRODUCTS GRID
=====================================*/

.products-container{

    width:90%;
    max-width:1200px;

    margin:10px auto 60px;

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

    gap:30px;

}


/*====================================
        PRODUCT CARD
=====================================*/

.product-card{

    background:white;

    border-radius:18px;

    overflow:hidden;

    text-align:center;

    padding:16px;

    box-shadow:0 5px 18px rgba(0,0,0,.12);

    transition:.3s;

    display:flex;

    flex-direction:column;

}

.product-card:hover{

    transform:translateY(-8px);

}

.product-card:hover img{

    transform:scale(1.04);

}

.product-card img{

    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:12px;

    transition:.35s;

}


.product-card h3{

    margin-top:16px;

    font-size:22px;

    color:#333;

    min-height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.product-card p{

    color:#777;

    margin:15px 0;

    line-height:1.7;

    min-height: 55px;

}


.product-card h4{

    color:#ff4f87;

    font-size:22px;

    margin-top: auto;

    margin-bottom:18px;

}


.add-to-cart-btn{

    display:block;

    width:100%;

    background:#ff4f87;

    color:white;

    padding:14px;

    border-radius:10px;

    font-size:18px;

    text-align:center;

    transition:.3s;

}


.add-to-cart-btn:hover{

    background:#ff2d70;

    color:white;

}


/*====================================
        LINKS
=====================================*/

.product-link{

    display:block;

    text-decoration:none;

    color:inherit;


}

/*================ CATEGORIES ================*/

.categories{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;

    margin:40px auto;
}

.categories a{

    text-decoration:none;

    color:#555;

    background:white;

    padding:12px 25px;

    border-radius:30px;

    font-weight:bold;

    transition:.3s;

    box-shadow:0 3px 10px rgba(0,0,0,.08);

}

.categories a:hover{

    background:#ff4f87;

    color:white;

}

.active-category{

    background:#ff4f87 !important;

    color:white !important;

}

/*================ SEARCH ================*/

.search-form{
    width:90%;
    max-width:650px;

    margin:35px auto 50px;

    display:flex;
    gap:12px;
}

.search-form input{

    flex:1;

    padding:15px 20px;

    border:1px solid #ddd;

    border-radius:12px;

    font-size:17px;

    outline:none;

    transition:.3s;
}

.search-form input:focus{

    border-color:#ff4f87;

    box-shadow:0 0 10px rgba(255,79,135,.2);

}

.search-form button{

    background:#ff4f87;

    color:white;

    border:none;

    padding:0 30px;

    border-radius:12px;

    cursor:pointer;

    transition:.3s;
}

.search-form button:hover{

    background:#ff2d70;

}


/*====================================
        RESPONSIVE - HOME
=====================================*/


@media (max-width:992px){

    .hero{

        margin:0 auto -40px;

    }

    .hero h2{

        font-size:42px;

    }

    .hero p{

        font-size:20px;

    }

    .products-container{

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

        gap:25px;

    }

}


@media (max-width:768px){


    .hero{

    margin:0;

    padding:70px 20px 90px;

    background-position:center top;

    background-size:cover;

    }

    .hero h2{

        font-size:34px;

        line-height:1.4;

    }

    .hero p{

        font-size:18px;

        line-height:1.9;

    }

    .hero button{

        width:100%;

        max-width:320px;

        font-size:18px;

    }

    .categories{

        width:90%;

        gap:12px;

    }

    .categories a{

    min-width:140px;

    }

    .categories a{

        padding:12px 20px;

        font-size:15px;

    }

    .search-form{

        flex-direction:column;

    }

    .search-form input{

        width:100%;

    }

    .search-form button{

        width:100%;

        padding:15px;

    }

    .products-container{

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

    }

    .product-card{

        width:100%;

        max-width:none;

        margin:0;

    }


}


@media (max-width:480px){

    .hero h2{

        font-size:28px;

    }

    .hero p{

        font-size:16px;

    }

    .products-title{

        font-size:30px;

    }

    .product-card{

        padding:18px;

    }

    .product-card h3{

        font-size:22px;

    }

    .product-card h4{

        font-size:22px;

    }

    .product-card img{

        height:230px;

    }

    .categories{

        gap:10px;

    }

    .categories a{

        width:calc(50% - 5px);

        text-align:center;

        padding:12px 10px;

    }

    .hero{

    padding:90px 18px 110px;

    }

    .hero h2{

        font-size:30px;

        line-height:1.5;

    }

    .hero p{

        font-size:17px;

        line-height:2;

    }

    .hero-btn{

        width:100%;

        max-width:300px;

    }

    
}

/*====================================
        HERO BUTTON
=====================================*/

.hero-btn{

    display:inline-block;

    margin-top:40px;

    padding:16px 34px;

    background:#ff4f87;

    color:white;

    text-decoration:none;

    border-radius:14px;

    font-size:18px;

    font-weight:700;

    transition:.3s;

    box-shadow:0 10px 25px rgba(255,79,135,.25);

}

.hero-btn:hover{

    background:#ff2d70;

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(255,79,135,.35);

}


/*====================================
        PRODUCTS HEADING
=====================================*/

.products-heading{

    text-align:center;

    margin:45px 0 35px;

}

.products-heading p{

    margin-top:12px;

    color:#777;

    font-size:18px;

}

/* ===========================
   Swiper Slider
=========================== */

.products-slider{

    width:90%;

    max-width:1250px;

    margin:0 auto;

    padding:20px 60px 70px;

}

.products-slider .swiper-slide{

    height:auto;

    display:flex;

}

.products-slider .product-card{

    width:100%;

}

.swiper-button-next,
.swiper-button-prev{

    right: 5px;
    
    left: 5px;

    color:#ff4f87;

    font-weight:bold;

}

.swiper-button-next::after,
.swiper-button-prev::after{

    font-size:28px;

}

.swiper-pagination{

    bottom:15px !important;

}

.swiper-pagination-bullet{

    width:10px;

    height:10px;

    opacity:.4;

    background:#ff4f87;

}

.swiper-pagination-bullet-active{

    opacity:1;

    transform:scale(1.25);

}

/*====================================
        CUSTOMER REVIEWS
=====================================*/

.reviews-home{

    width:90%;

    max-width:900px;

    margin:100px auto 80px;

}

.reviews-heading{

    text-align:center;

    margin-bottom:40px;

}

.reviews-heading h2{

    font-size:36px;

    color:#333;

    margin-bottom:12px;

}

.reviews-heading p{

    color:#777;

    font-size:18px;

}

.reviews-slider{

    padding-bottom:55px;

}

.review-home-card{

    background:#fff;

    border-radius:28px;

    padding:45px 40px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.review-home-stars{

    color:#f7b500;

    font-size:28px;

    margin-bottom:25px;

}

.review-home-text{

    font-size:22px;

    color:#555;

    line-height:2;

    margin-bottom:35px;

    font-style:italic;

    min-height:90px;

}

.review-home-card h4{

    color:#333;

    font-size:24px;

    margin-bottom:10px;

}

.review-home-card span{

    color:#ff4f87;

    font-size:18px;

    font-weight:bold;

}

.reviews-pagination{

    margin-top:30px;

    text-align:center;

}

.reviews-pagination .swiper-pagination-bullet{

    background:#ff4f87;

    opacity:.35;

}

.reviews-pagination .swiper-pagination-bullet-active{

    opacity:1;

    transform:scale(1.3);

}

@media (max-width:768px){

    .review-home-card{

        padding:30px 24px;

    }

    .review-home-text{

        font-size:18px;

        min-height:auto;

    }

    .reviews-heading h2{

        font-size:30px;

    }

    .reviews-heading p{

        font-size:16px;

    }

}


.review-product-link{

    color:#ff4f87;

    font-size:18px;

    font-weight:bold;

    text-decoration:none;

    transition:.3s;

}

.review-product-link:hover{

    color:#ff2d70;

    text-decoration:underline;

}

.quote{

    color:#ff4f87;

    font-size:38px;

    font-weight:bold;

}