/* =====================================================
   MARUWATA HAPPY CUSTOMERS PAGE
   Isolated Professional CSS
===================================================== */


/* GLOBAL */

.happy-page{

    width:100%;
    overflow:hidden;
    background:#f7f9fc;
    font-family:'Poppins',Arial,sans-serif;

}


.happy-page *{

    box-sizing:border-box;

}



.happy-page .container{

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

}



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


.happy-page .happy-hero{


    background:linear-gradient(135deg,#0358c7,#0066cc);

    padding:100px 20px;

    text-align:center;

    color:#fff;


}



.happy-page .hero-badge{


    display:inline-block;

    background:rgba(255,255,255,.15);

    padding:12px 25px;

    border-radius:50px;

    font-size:15px;

    margin-bottom:25px;


}



.happy-page .happy-hero h1{


    font-size:52px;

    margin:0 0 20px;

    font-weight:700;


}



.happy-page .happy-hero p{


    max-width:750px;

    margin:auto;

    font-size:18px;

    line-height:1.8;


}



.happy-page .shop-btn{


    display:inline-block;

    margin-top:35px;

    padding:15px 40px;

    background:#f89a1c;

    color:white;

    text-decoration:none;

    border-radius:50px;

    font-weight:600;


}







/* ================= STATISTICS ================= */


.happy-page .statistics{


    padding:70px 0;

    background:white;


}



.happy-page .stats-grid{


    display:grid;

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

    gap:25px;


}



.happy-page .stat-card{


    background:#fff;

    padding:35px 20px;

    text-align:center;

    border-radius:20px;

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


}



.happy-page .stat-card i{


    font-size:40px;

    color:#08a8e8;

}



.happy-page .stat-card h2{


    font-size:35px;

    margin:15px 0 5px;

    color:#222;


}







/* ================= SECTION TITLE ================= */


.happy-page .section-title{


    text-align:center;

    margin-bottom:45px;


}



.happy-page .section-title h2{


    font-size:36px;

    color:#222;

}



.happy-page .section-title p{


    color:#777;

}







/* ================= TESTIMONIAL ================= */


.happy-page .testimonials{


    padding:80px 0;


}



.happy-page .testimonial-grid{


    display:grid;

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

    gap:30px;


}



.happy-page .testimonial-card{


    background:#fff;

    padding:30px;

    border-radius:20px;

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


}



.happy-page .customer-top{


    display:flex;

    gap:20px;

    align-items:center;

}



.happy-page .customer-image img{


    width:80px;

    height:80px;

    border-radius:50%;

    object-fit:cover;


}



.happy-page .customer-info h3{


    margin:0;

    font-size:18px;

    color:#222;


}



.happy-page .customer-info span{


    color:#777;

    font-size:14px;


}



.happy-page .rating i{


    color:#f89a1c;

    font-size:14px;


}



.happy-page .review-text{


    margin-top:20px;

}



.happy-page .review-text p{


    line-height:1.8;

}



.happy-page .quote-icon{


    color:#08a8e8;

    font-size:30px;


}







/* ================= GALLERY ================= */
/* =========================
CUSTOMER GALLERY
========================= */

.happy-page .customer-gallery{

    padding:80px 0;

    background:#fff;

}



/* GRID */

.happy-page .gallery-grid{

    display:grid;

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

    gap:25px;

}



/* ITEM */

.happy-page .gallery-item{

    width:300px;

    height:300px;

    overflow:hidden;

    border-radius:5%;

    border:3px solid #e5e7eb;

    padding:5px;

    background:#fff;

    transition:.3s;

    margin:auto;

}



/* IMAGE */

.happy-page .gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:5%;

    transition:.4s;

}



/* HOVER */

.happy-page .gallery-item:hover{

    border-color:#0ea5e9;

    transform:translateY(-5px);

    box-shadow:0 10px 25px rgba(0,0,0,.15);

}


.happy-page .gallery-item:hover img{

    transform:scale(1.1);

}



/* RESPONSIVE */

@media(max-width:768px){


.happy-page .gallery-grid{

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

}


}


@media(max-width:480px){


.happy-page .gallery-grid{

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

}


}





/* ================= ACHIEVEMENTS ================= */


.happy-page .customer-achievements{


    padding:80px 0;


}



.happy-page .achievement-grid{


    display:grid;

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

    gap:25px;


}



.happy-page .achievement-box{


    background:#fff;

    padding:35px 25px;

    border-radius:20px;

    text-align:center;

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


}



.happy-page .achievement-box i{


    color:#08a8e8;

    font-size:40px;


}



.happy-page .achievement-box h3{


    color:#222;

}







/* ================= WHY MARUWATA ================= */


.happy-page .why-maruwata{


    padding:80px 0;

    background:#fff;


}



.happy-page .why-grid{


    display:grid;

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

    gap:25px;


}



.happy-page .why-card{


    background:#f7f9fc;

    padding:35px 20px;

    border-radius:20px;

    text-align:center;


}



.happy-page .why-icon{


    width:80px;

    height:80px;

    margin:auto;

    background:#08a8e8;

    color:white;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;


}



.happy-page .why-card h3{


    margin-top:20px;

    color:#222;


}







/* ================= CTA ================= */


.happy-page .happy-cta{


    padding:80px 0;


}



.happy-page .cta-box{


    background:linear-gradient(135deg,#08a8e8,#0066cc);

    padding:60px 30px;

    text-align:center;

    border-radius:25px;

    color:white;


}



.happy-page .cta-box h2{


    font-size:36px;


}



.happy-page .cta-button{


    display:inline-block;

    margin-top:20px;

    background:#f89a1c;

    color:white;

    padding:15px 40px;

    border-radius:50px;

    text-decoration:none;


}







/* ================= TRUST ================= */


.happy-page .trust-section{


    padding:60px 0;

    text-align:center;


}



.happy-page .trust-content i{


    font-size:45px;

    color:#f89a1c;


}



.happy-page .trust-content h2{


    color:#222;

    margin:20px 0;


}







/* ================= MOBILE ================= */


@media(max-width:992px){


.happy-page .stats-grid,
.happy-page .achievement-grid,
.happy-page .why-grid{


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


}



.happy-page .testimonial-grid{


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


}



.happy-page .gallery-grid{


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


}


}





@media(max-width:768px){



.happy-page .happy-hero h1{

font-size:36px;

}



.happy-page .stats-grid,
.happy-page .testimonial-grid,
.happy-page .gallery-grid,
.happy-page .achievement-grid,
.happy-page .why-grid{


grid-template-columns:1fr;


}



.happy-page .customer-top{


align-items:flex-start;


}


}