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

.products-hero{

    position:relative;

    min-height:75vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background:url("asset/images/gallery/gallery-banner.jpg")
               center/cover no-repeat;

    overflow:hidden;

}

.products-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(8,18,32,.78),
        rgba(8,18,32,.82)
    );

}

.hero-subtitle{

    position:relative;

    display:inline-block;
    color: #d3a32a;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 20px;

}

.products-title{

    position:relative;

    color:#fff;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3rem,6vw,5.4rem);
    line-height: 1.1;
    margin-bottom: 25px;

}

.products-title span{
    color:#d3a32a;
}

.products-description{

    position:relative;

    max-width:780px;
    margin:0 auto;
    color:#f2f2f2;
    font-size:1.18rem;
    line-height:1.9;

}

.hero-buttons{

    position:relative;

    margin-top:45px;

}
/*==========================================
PRODUCT OVERVIEW
==========================================*/

.products-overview{
    background:#f8fafc;
}

.product-overview-card{
    display:block;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    text-decoration:none;
    transition:.35s;
    height:100%;
    border:1px solid #ececec;
}

.product-overview-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.product-overview-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.overview-content{
    padding:24px;
}

.overview-content h4{
    color:#102846;
    font-weight:700;
    margin-bottom:10px;
}

.overview-content p{
    color:#6b7280;
    margin:0;
    line-height:1.7;
}

@media(max-width:768px){

    .product-overview-card img{
        height:190px;
    }

}

<!-- ==========================================
     MARBLE
========================================== -->


<section class="product-section" id="marble">

    <div class="container-xxl">

        <div class="row align-items-center g-5">

            <!-- Image -->

            <div class="col-lg-6">

                <div class="product-image">

                    <img src="asset/images/products/marble.jpg"
                         alt="Premium Marble Collection">

                </div>

            </div>

            <!-- Content -->

            <div class="col-lg-6">

                <span class="section-subtitle">
                    PREMIUM MARBLE
                </span>

                <h2 class="product-title">

                    Elegant Marble
                    <span>For Timeless Interiors</span>

                </h2>

                <p class="product-description">

                    Enhance your living spaces with our premium collection
                    of natural marble. Available in a variety of colors,
                    textures, and finishes, our marble offers exceptional
                    beauty, durability, and sophistication for residential
                    and commercial projects.

                </p>

                <div class="product-features">

                    <div><i class="fa-solid fa-circle-check"></i> Premium Natural Marble</div>

                    <div><i class="fa-solid fa-circle-check"></i> High Gloss & Matte Finishes</div>

                    <div><i class="fa-solid fa-circle-check"></i> Durable & Long Lasting</div>

                    <div><i class="fa-solid fa-circle-check"></i> Multiple Colors & Patterns</div>

                    <div><i class="fa-solid fa-circle-check"></i> Ideal For Flooring & Walls</div>

                    <div><i class="fa-solid fa-circle-check"></i> Easy Maintenance</div>

                </div>

                <div class="product-buttons">

                    <a href="https://wa.me/918764022828"
                       target="_blank"
                       class="btn btn-primary-custom">

                        Request Quote

                    </a>

                    <a href="contact.html"
                       class="btn btn-outline-custom">

                        Contact Us

                    </a>

                </div>

            </div>

        </div>

    </div>

</section>
/*==========================================
PRODUCT SECTION
==========================================*/

.product-section{
    padding:100px 0;
    background:#fff;
}

.product-image{
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.product-image img{
    width:100%;
    height:520px;
    object-fit:cover;
    display:block;
}

.product-section .product-title{
    color:#102846;
    font-size:3rem;
    font-family:"Cormorant Garamond",serif;
    margin:18px 0;
}

.product-section .product-title span{
    color:#c89b2c;
}

.product-section .product-description{
    color:#666;
    line-height:1.9;
    margin-bottom:30px;
}

.product-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    margin-bottom:35px;
}

.product-features div{
    font-size:17px;
    color:#444;
}

.product-features i{
    color:#c89b2c;
    margin-right:8px;
}

.product-buttons{
    display:flex;
    gap:18px;
}

@media(max-width:768px){

    .product-image img{
        height:350px;
    }

    .product-features{
        grid-template-columns:1fr;
    }

    .product-buttons{
        flex-direction:column;
    }

}

.product-section:nth-child(even){
    background:#f8fafc;
}
/*==========================================
PRODUCTS CTA
==========================================*/

.products-cta{

    padding:100px 0;

    background:#f8fafc;

}

.cta-box{

    background:linear-gradient(135deg,#0f2745,#17395f);

    border-radius:28px;

    padding:80px 50px;

    text-align:center;

    color:#fff;

}

.cta-box h2{

    font-size:clamp(2.2rem,5vw,3.8rem);

    font-family:"Cormorant Garamond",serif;

    margin:25px 0;

    line-height:1.2;

}

.cta-box h2 span{

    color:#c89b2c;

}

.cta-box p{

    max-width:760px;

    margin:0 auto;

    color:#d7dde5;

    line-height:1.9;

    font-size:1.08rem;

}

.cta-box .hero-buttons{

    margin-top:45px;

}

@media(max-width:768px){

    .cta-box{

        padding:60px 25px;

    }

}
.products-hero{
    position: relative;
}

.products-overlay{
    position: absolute;
    inset: 0;
    z-index: 1;
}

.products-hero .container-xxl{
    position: relative;
    z-index: 2;
}