/* ======================================================
 MOMBATTI - Production CSS (Merged Refactor)
 Generated from Phase 1-4
 ====================================================== */

/*=========================================
MOMBATTI
Premium Ecommerce Website
Author : Vivek Gupta
==========================================*/

:root{

    --primary:#D4A017;
    --secondary:#FFF8ED;
    --white:var(--white)fff;
    --black:var(--black)222;
    --gray:var(--gray)666;
    --border:#ececec;
    --transition:.35s ease;
    --primary-dark:var(--primary-dark);
    --bg-soft:var(--bg-soft);
    --shadow-sm:0 10px 30px rgba(0,0,0,.05);
    --shadow-md:0 15px 40px rgba(0,0,0,.08);
    --shadow-lg:0 20px 45px rgba(0,0,0,.10);
    --radius-sm:20px;
    --radius-md:30px;
    --radius-lg:50px;

}

/*=========================================
Reset
==========================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
   
    font-family:'Manrope',sans-serif;
    color:var(--black);
    background:var(--white);
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    transition:var(--transition);
}

ul{
    list-style:none;
    margin:0;
    padding:0;
}

.section-subtitle{

    color:var(--primary);
    letter-spacing:2px;
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;

}

section{

    padding:80px 0;

}

h1,h2,h3,h4,h5{

    font-family:'Cormorant Garamond',serif;

}

/*=========================================
Top Bar
==========================================*/

.top-bar{

    background:var(--primary);
    color:var(--white);
    padding:12px 0;
    font-size:14px;

}

.top-bar p{

    margin:0;

}

.top-bar a{

    color:var(--white);
    margin-left:20px;
    font-size:14px;

}

.top-bar a:hover{

    color:var(--white)8d2;

}

/*=========================================
Navbar
==========================================*/

.navbar{padding: 0px 0;/* background:var(--white) !important; */}

.logo{/* font-size:38px; *//* color:var(--primary); */font-weight:700;/* letter-spacing:3px; */margin:0;width: 20%;}

.navbar-nav .nav-link{

    color:var(--black);
    font-size:15px;
    margin:0 12px;
    font-weight:500;
    position:relative;

}

.navbar-nav .nav-link:hover{

    color:var(--primary);

}

.navbar-nav .active{

    color:var(--primary)!important;

}

.navbar-nav .nav-link::after{

    content:'';
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:2px;
    background:var(--primary);
    transition:.4s;

}

.navbar-nav .nav-link:hover::after{

    width:100%;

}

/*=========================================
Icons
==========================================*/

.icons{

    gap:20px;

}

.icons a{

    color:var(--black);
    font-size:22px;

}

.icons a:hover{

    color:var(--primary);
    transform:translateY(-3px);

}

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

.hero-section{

    min-height:95vh;

    background:var(--bg-soft);

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

}

/* Left */

.hero-tag{

    display:inline-block;

    padding:10px 22px;

    background:var(--white);

    border-radius:40px;

    color:var(--primary-dark);

    font-weight:600;

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

    margin-bottom:25px;

}

.hero-title{

    font-size:78px;

    line-height:1.1;

    color:var(--black);

    margin-bottom:30px;

}

.hero-text{

    font-size:18px;

    line-height:34px;

    color:var(--gray);

    max-width:520px;

}

/* Buttons */

.hero-btn{

    margin-top:40px;

    display:flex;

    gap:20px;

}

.btn-shop{

    background:var(--primary-dark);

    color:var(--white);

    padding:16px 40px;

    border-radius:50px;

    font-weight:600;

}

.btn-shop:hover{

    background:var(--black);

    color:var(--white);

}

.btn-outline{

    border:2px solid var(--primary-dark);

    color:var(--primary-dark);

    padding:16px 40px;

    border-radius:50px;

    font-weight:600;

}

.btn-outline:hover{

    background:var(--primary-dark);

    color:var(--white);

}

/* Stats */

.hero-feature{

    display:flex;

    gap:60px;

}

.hero-feature h3{

    font-size:34px;

    color:var(--primary-dark);

    margin-bottom:8px;

}

.hero-feature span{

    color:#777;

    font-size:14px;

}

/* Image */

.hero-image-box{

    position:relative;

    display:flex;

    justify-content:center;

}

.circle-bg{

    position:absolute;

    width:520px;

    height:520px;

    background:#F5E7C9;

    border-radius:50%;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

}

.hero-image{

    position:relative;

    z-index:5;

    width:430px;

    animation:float 5s infinite ease-in-out;

    filter:drop-shadow(0 30px 40px rgba(0,0,0,.18));

}

/* Floating Animation */

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-20px);

}

100%{

transform:translateY(0);

}

}

/* Scroll */

.scroll-down{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    text-align:center;

    color:#999;

}

.scroll-down i{

    display:block;

    margin-top:6px;

    font-size:22px;

    color:var(--primary-dark);

}

/* Mobile */

@media(max-width:991px){

.hero-section{

padding:100px 0;

text-align:center;

}

.hero-title{

font-size:52px;

}

.hero-btn{

justify-content:center;

}

.hero-feature{

justify-content:center;

margin-bottom:50px;

}

.hero-image{

width:320px;

}

.circle-bg{

width:360px;

height:360px;

}

}

@media(max-width:576px){

.hero-title{

font-size:42px;

}

.hero-feature{

flex-direction:column;

gap:20px;

}

.hero-btn{

flex-direction:column;

}

.btn-shop,

.btn-outline{

width:100%;

}

}


/* PHASE 2 - Refactored: Featured Collections, Why Choose, Best Sellers */

/*=========================================
FEATURED COLLECTIONS
=========================================*/

.featured-collections{

    background:var(--bg-soft, #FFF8EF);

}

.collection-card{

    position:relative;

    overflow:hidden;

    border-radius:25px;

    height:450px;

    cursor:pointer;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.collection-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.8s ease;

}

.collection-card:hover img{

    transform:scale(1.12);

}

.collection-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
    rgba(0,0,0,.80),
    rgba(0,0,0,.10));

    display:flex;

    flex-direction:column;

    justify-content:end;

    padding:35px;

    color:var(--white, #fff);

}

.collection-overlay h3{

    font-size:36px;

    margin-bottom:12px;

}

.collection-overlay p{

    line-height:28px;

    margin-bottom:20px;

    opacity:.9;

}

.collection-overlay a{

    width:max-content;

    padding:14px 28px;

    background:var(--primary-dark, #C89B3C);

    color:var(--white, #fff);

    border-radius:40px;

    transition:var(--transition,.35s ease);

}

.collection-overlay a:hover{

    background:var(--white, #fff);

    color:var(--black, #222);

}

.collection-card:hover{

    transform:translateY(-10px);

}

.section-text{

    max-width:650px;

    margin:auto;

    color:#777;

}
/*==================================
WHY CHOOSE
==================================*/

.why-choose{

    padding:110px 0;

    background:var(--white, #fff)fff;

}

.feature-box{

    background:var(--white, #fff);

    border:1px solid #EFE7DA;

    border-radius:20px;

    padding:45px 30px;

    text-align:center;

    transition:var(--transition,.35s ease);

    height:100%;

}

.feature-box:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.feature-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:var(--bg-soft, #FFF8EF);

    display:flex;

    align-items:center;

    justify-content:center;

}

.feature-icon i{

    font-size:40px;

    color:var(--primary-dark, #C89B3C);

}

.feature-box h4{

    font-size:30px;

    margin-bottom:15px;

}

.feature-box p{

    color:var(--gray, #666);

    line-height:28px;

}
/*=========================================
BEST SELLERS
=========================================*/

.best-sellers{

    background:var(--bg-soft, #FFF8EF);
    padding:110px 0;

}

.product-card{

    position:relative;
    background:var(--white, #fff);
    border-radius:22px;
    overflow:hidden;
    transition:var(--transition,.35s ease);
    border:1px solid #EFE7DA;
    box-shadow:0 12px 35px rgba(0,0,0,.06);

}

.product-card:hover{

    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,.10);

}

.sale-badge{

    position:absolute;
    top:20px;
    left:20px;
    background:var(--primary-dark, #C89B3C);
    color:var(--white, #fff);
    padding:6px 16px;
    border-radius:30px;
    font-size:13px;
    z-index:5;

}

.product-icons{

    position:absolute;
    right:18px;
    top:18px;
    display:flex;
    flex-direction:column;
    gap:12px;
    z-index:5;

}

.product-icons a{

    width:42px;
    height:42px;
    background:var(--white, #fff);
    color:var(--black, #222);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    transition:var(--transition,.35s ease);

}

.product-icons a:hover{

    background:var(--primary-dark, #C89B3C);
    color:var(--white, #fff);

}

.product-image{

    background:var(--bg-soft, #FFF8EF);
    padding:30px;

}

.product-image img{

    width:100%;
    height:280px;
    object-fit:cover;
    transition:.5s ease;

}

.product-card:hover .product-image img{

    transform:scale(1.08);

}

.product-content{

    padding:25px;
    text-align:center;

}

.product-content small{

    color:#888;
    text-transform:uppercase;
    letter-spacing:1px;

}

.product-content h4{

    font-size:30px;
    margin:10px 0;

}

.rating{

    color:#f6b400;
    margin-bottom:15px;

}

.price{

    font-size:28px;
    color:var(--primary-dark, #C89B3C);
    font-weight:700;
    margin-bottom:20px;

}

.price span{

    color:#999;
    text-decoration:line-through;
    font-size:18px;
    margin-left:8px;

}

.cart-btn{

    display:inline-block;
    width:100%;
    padding:14px;
    border-radius:50px;
    background:var(--black, #222);
    color:var(--white, #fff);
    transition:var(--transition,.35s ease);

}

.cart-btn:hover{

    background:var(--primary-dark, #C89B3C);
    color:var(--white, #fff);

}


/* PHASE 3 - Founder, Corporate, Testimonials, Instagram, Newsletter */

ABOUT FOUNDER
==================================*/

.founder-section{

    background:var(--white, #fff)fff;
    padding:110px 0;

}

.founder-image{

    position:relative;
    overflow:hidden;
    border-radius:30px;

}

.founder-image img{

    width:100%;
    border-radius:30px;
    transition:var(--transition,.35s ease);

}

.founder-image:hover img{

    transform:scale(1.05);

}

/* Experience Card */

.experience-box{

    position:absolute;

    left:30px;
    bottom:30px;

    background:var(--white, #fff);

    padding:25px;

    width:180px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 20px 40px rgba(0,0,0,.08);

}

.experience-box h3{

    font-size:42px;

    color:var(--primary-dark, #C89B3C);

    margin-bottom:8px;

}

.experience-box span{

    color:#777;

    font-size:14px;

}

/* Text */

.founder-text{

    color:var(--gray, #666);

    line-height:34px;

    margin-bottom:25px;

}

.signature{

    margin-top:35px;

    border-left:4px solid var(--primary-dark, #C89B3C);

    padding-left:20px;

}

.signature h4{

    font-size:34px;

    margin-bottom:5px;

}

.signature span{

    color:#777;

    letter-spacing:1px;

}

/* Responsive */

@media(max-width:991px){

.founder-section{

text-align:center;

}

.signature{

border:none;

padding:0;

}

.experience-box{

left:50%;

transform:translateX(-50%);

}

}
/*======================================
CORPORATE GIFTING
======================================*/

.corporate-section{

    padding:120px 0;

    background:var(--bg-soft, #FFF8EF);

}

.corporate-image{

    position:relative;

    overflow:hidden;

    border-radius:30px;

}

.corporate-image img{

    border-radius:30px;

    transition:var(--transition,.35s ease);

}

.corporate-image:hover img{

    transform:scale(1.05);

}

.gift-badge{

    position:absolute;

    left:30px;

    bottom:30px;

    background:var(--white, #fff);

    padding:18px 24px;

    border-radius:18px;

    display:flex;

    align-items:center;

    gap:15px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.gift-badge i{

    font-size:32px;

    color:var(--primary-dark, #C89B3C);

}

.gift-badge span{

    font-weight:600;

}

.gift-list{

    margin-top:35px;

}

.gift-list div{

    margin-bottom:18px;

    font-size:17px;

}

.gift-list i{

    color:var(--primary-dark, #C89B3C);

    margin-right:12px;

}

@media(max-width:991px){

.corporate-section{

text-align:center;

}

.corporate-image{

margin-bottom:40px;

}

.gift-badge{

left:50%;

transform:translateX(-50%);

}

}
/*=========================================
TESTIMONIALS
==========================================*/

.testimonial-section{

    padding:110px 0;

    background:var(--white, #fff)fff;

}

.testimonial-card{

    background:var(--white, #fff);

    padding:35px;

    border-radius:22px;

    border:1px solid #EFE7DA;

    box-shadow:0 15px 40px rgba(0,0,0,.05);

    transition:var(--transition,.35s ease);

    height:100%;

}

.testimonial-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.stars{

    color:var(--primary-dark, #C89B3C);

    font-size:22px;

    margin-bottom:20px;

}

.testimonial-card p{

    color:var(--gray, #666);

    line-height:30px;

    margin-bottom:30px;

}

.customer{

    display:flex;

    align-items:center;

    gap:15px;

}

.customer img{

    width:65px;

    height:65px;

    border-radius:50%;

    object-fit:cover;

}

.customer h5{

    margin:0;

    font-size:20px;

}

.customer span{

    color:#888;

    font-size:14px;

}
/*==================================
INSTAGRAM
===================================*/

.instagram-section{

    padding:110px 0;

    background:var(--bg-soft, #FFF8EF);

}

.insta-card{

    position:relative;

    overflow:hidden;

    border-radius:22px;

}

.insta-card img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:.7s;

}

.insta-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.65);

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    color:var(--white, #fff);

    opacity:0;

    transition:var(--transition,.35s ease);

}

.insta-card:hover img{

    transform:scale(1.12);

}

.insta-card:hover .insta-overlay{

    opacity:1;

}

.insta-overlay i{

    font-size:40px;

    margin-bottom:15px;

    color:var(--primary-dark, #C89B3C);

}

.insta-overlay h4{

    font-size:30px;

    margin-bottom:20px;

}

.insta-overlay a{

    padding:14px 30px;

    background:var(--primary-dark, #C89B3C);

    color:var(--white, #fff);

    border-radius:40px;

}

.insta-overlay a:hover{

    background:var(--white, #fff);

    color:var(--black, #222);

}
/*==================================
NEWSLETTER
==================================*/

.newsletter-section{

    padding:100px 0;

    background:var(--white, #fff)fff;

}

.newsletter-box{

    background:#1F1F1F;

    color:var(--white, #fff);

    padding:70px;

    border-radius:30px;

}

.newsletter-title{

    font-size:52px;

    margin:15px 0;

}

.newsletter-box p{

    color:#ddd;

    line-height:30px;

}

.newsletter-form{

    display:flex;

    background:var(--white, #fff);

    border-radius:60px;

    overflow:hidden;

}

.newsletter-form input{

    flex:1;

    border:none;

    outline:none;

    padding:18px 25px;

}

.newsletter-form button{

    border:none;

    background:var(--primary-dark, #C89B3C);

    color:var(--white, #fff);

    padding:18px 35px;

    font-weight:600;

}

.newsletter-form button:hover{

    background:#A67C28;

}

@media(max-width:991px){

.newsletter-box{

text-align:center;

padding:40px;

}

.newsletter-form{

margin-top:30px;

flex-direction:column;

border-radius:20px;

}

.newsletter-form button{

width:100%;

}

}


/* PHASE 4 - Footer, Floating Button & Final Cleanup */

/*==================================
FOOTER
==================================*/

.footer{

background:#111;

color:var(--white, #fff);

padding:90px 0 30px;

}

.footer-logo{font-size:42px;color:var(--primary-dark, #C89B3C);margin-bottom:20px;width: 25%;}

.footer p{

color:#bbb;

line-height:30px;

}

.footer h5{

margin-bottom:25px;

font-size:22px;

}

.footer ul{

padding:0;

list-style:none;

}

.footer ul li{

margin-bottom:12px;

}

.footer ul li a{

color:#bbb;

text-decoration:none;

transition:var(--transition,.35s ease);

}

.footer ul li a:hover{

color:var(--primary-dark, #C89B3C);

padding-left:6px;

}

.social-links{

margin-top:30px;

display:flex;

gap:15px;

}

.social-links a{

width:45px;

height:45px;

border-radius:50%;

background:var(--black, #222);

display:flex;

justify-content:center;

align-items:center;

color:var(--white, #fff);

transition:var(--transition,.35s ease);

}

.social-links a:hover{

background:var(--primary-dark, #C89B3C);

}

.footer hr{

margin:50px 0 25px;

border-color:#333;

}

.copyright{

text-align:center;

color:#999;

}
.whatsapp-btn{

position:fixed;

right:25px;

bottom:25px;

width:60px;

height:60px;

background:#25D366;

color:var(--white, #fff);

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

font-size:30px;

z-index:999;

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

transition:var(--transition,.35s ease);

}

.whatsapp-btn:hover{

transform:scale(1.1);

color:var(--white, #fff);

}