:root{

--primary:#C89B3C;

--secondary:#1F2937;

--accent:#F8F5EF;

--white:#ffffff;

--dark:#121212;

--gray:#777777;

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

--radius:18px;

--transition:.35s ease;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

    margin:0;

    background:
    linear-gradient(
        180deg,
        #FFF8FC 0%,
        #FFF3F8 45%,
        #FFEFF6 100%
    );

    color:#2D2D2D;

    overflow-x:hidden;

}

h1,h2,h3,h4,h5{

font-family:'Playfair Display',serif;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

}

section{

padding:70px 0;

}

.container{

max-width:1320px;

}
/*=====================================
NAVBAR
======================================*/

#navbar{

position:fixed;

top:0;

left:0;

width:100%;

z-index:9999;

padding:18px 0;

transition:.4s;

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

backdrop-filter:blur(15px);

}

#navbar.scrolled{

background:#ffffff;

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

padding:12px 0;

}

.navbar-custom{

display:flex;

align-items:center;

justify-content:space-between;

}

.logo{

display:flex;

align-items:center;

gap:12px;

font-size:30px;

font-weight:700;

color:#222;

}

.logo img{

height:55px;

}

.logo span{

font-family:'Playfair Display',serif;

}

.nav-links{

display:flex;

gap:35px;

list-style:none;

margin:0;

}

.nav-links a{

color:#222;

font-weight:500;

position:relative;

transition:.3s;

}

.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:#C89B3C;

transition:.4s;

}

.nav-links a:hover::after,

.nav-links a.active::after{

width:100%;

}

.nav-icons{

display:flex;

gap:15px;

align-items:center;

}

.icon-btn{

width:45px;

height:45px;

border-radius:50%;

border:none;

background:#fff;

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

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

transition:.3s;

color:#222;

}

.icon-btn:hover{

background:#C89B3C;

color:#fff;

transform:translateY(-4px);

}

.whatsapp{

background:#25D366;

color:#fff;

}

.mobile{

display:none;

}

.mobile-menu{

position:fixed;

right:-100%;

top:0;

width:320px;

height:100vh;

background:#fff;

padding:50px;

display:flex;

flex-direction:column;

gap:25px;

transition:.4s;

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

z-index:99999;

}

.mobile-menu.active{

right:0;

}

.mobile-menu a{

font-size:20px;

color:#222;

}

.close-menu{

position:absolute;

right:20px;

top:20px;

background:none;

border:none;

font-size:28px;

}

.search-popup{

position:fixed;

left:0;

top:-100%;

width:100%;

height:220px;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

transition:.4s;

z-index:99999;

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

}

.search-popup.active{

top:0;

}

.search-box{

display:flex;

width:70%;

}

.search-box input{

flex:1;

padding:18px;

border:2px solid #eee;

font-size:18px;

border-radius:50px 0 0 50px;

}

.search-box button{

width:80px;

border:none;

background:#C89B3C;

color:#fff;

border-radius:0 50px 50px 0;

}

.floating-whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

background:#25D366;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:30px;

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

animation:float 3s infinite;

z-index:999;

}

@keyframes float{

50%{

transform:translateY(-10px);

}

}

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

.hero-section{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
        linear-gradient(135deg,#faf7f2 0%,#ffffff 45%,#f5efe4 100%);
    padding-top:90px;
}

/* Decorative Background */

.hero-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:0;
}

/* Hero Content */

.hero-section .container{
    position:relative;
    z-index:5;
}

/* Badge */

.hero-tag{

    display:inline-flex;
    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:40px;

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

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.40);

    color:#c89b3c;

    font-size:15px;

    font-weight:600;

    letter-spacing:.5px;

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

    margin-bottom:30px;

}

/* Main Heading */

.hero-title{

    font-size:72px;

    line-height:1.1;

    font-weight:700;

    color:#222;

    margin-bottom:25px;

    font-family:'Playfair Display',serif;

}

.hero-title span{

    color:#C89B3C;

}

/* Paragraph */

.hero-text{

    font-size:18px;

    color:#666;

    max-width:600px;

    line-height:1.9;

    margin-bottom:40px;

}

/* Buttons */

.hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

/* Shop Button */

.btn-shop{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:17px 40px;

    background:#C89B3C;

    color:#fff;

    border-radius:50px;

    font-weight:600;

    transition:.4s;

    box-shadow:0 15px 35px rgba(200,155,60,.35);

}

.btn-shop:hover{

    color:#fff;

    transform:translateY(-5px);

    background:#b98a26;

}

/* WhatsApp */

.btn-whatsapp{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:17px 34px;

    border-radius:50px;

    background:#fff;

    color:#25D366;

    font-weight:600;

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

    transition:.4s;

}

.btn-whatsapp:hover{

    background:#25D366;

    color:#fff;

    transform:translateY(-5px);

}

/* Statistics */

.hero-stats{

    display:flex;

    gap:55px;

    margin-top:60px;

    flex-wrap:wrap;

}

.stat{

    position:relative;

}

.stat::after{

    content:"";

    position:absolute;

    right:-28px;

    top:10px;

    width:1px;

    height:45px;

    background:#ddd;

}

.stat:last-child::after{

    display:none;

}

.stat h2{

    font-size:42px;

    color:#C89B3C;

    margin-bottom:8px;

    font-weight:700;

}

.stat span{

    color:#777;

    font-size:15px;

}

/* RIGHT SIDE */

.hero-right{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

/* Circle */

.circle-bg{

    position:absolute;

    width:620px;

    height:620px;

    border-radius:50%;

    background:

    radial-gradient(circle,#f4e6bf 0%,transparent 70%);

    z-index:-1;

}

/* Main Image */

.hero-main-image{

    width:100%;

    max-width:560px;

    position:relative;

    z-index:5;

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

    transition:.5s;

}

.hero-main-image:hover{

    transform:scale(1.03);

}

/* Wrapper */

.hero-image-wrapper{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}



/*=====================================================
        HERO FLOATING CARDS
======================================================*/

.floating-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:15px;

    width:230px;

    padding:16px;

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

    backdrop-filter:blur(25px);

    border:1px solid rgba(255,255,255,.35);

    border-radius:22px;

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

    transition:.45s ease;

    z-index:20;

}

.floating-card:hover{

    transform:translateY(-8px) scale(1.03);

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

}

.floating-card img{

    width:55px;

    height:55px;

    border-radius:14px;

    padding:10px;

    background:#f7f2e7;

    object-fit:contain;

}

.floating-card strong{

    display:block;

    font-size:17px;

    color:#222;

    margin-bottom:4px;

}

.floating-card small{

    color:#888;

    font-size:13px;

}

/* Card Positions */

.card1{

    top:8%;

    left:-70px;

}

.card2{

    top:48%;

    right:-70px;

}

.card3{

    bottom:5%;

    left:-30px;

}


/*=====================================================
        BACKGROUND DECORATIVE SHAPES
======================================================*/

.shape{

    position:absolute;

    border-radius:50%;

    filter:blur(10px);

    opacity:.35;

}

/* Gold */

.shape1{

    width:280px;

    height:280px;

    background:#e6c97d;

    top:-100px;

    left:-80px;

}

/* Beige */

.shape2{

    width:220px;

    height:220px;

    background:#f0dcc5;

    right:-50px;

    top:18%;

}

/* Cream */

.shape3{

    width:180px;

    height:180px;

    background:#efe7db;

    bottom:-60px;

    left:18%;

}

/* Soft Gold */

.shape4{

    width:140px;

    height:140px;

    background:#d7b56d;

    bottom:60px;

    right:12%;

}


/*=====================================================
            HERO IMAGE EFFECTS
======================================================*/

.hero-image-wrapper{

    animation:heroFloat 7s ease-in-out infinite;

}

.hero-main-image{

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

}


/*=====================================================
        SCROLL INDICATOR
======================================================*/

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

}

.scroll-indicator span{

    display:block;

    width:28px;

    height:48px;

    border:2px solid #C89B3C;

    border-radius:30px;

    position:relative;

}

.scroll-indicator span::before{

    content:"";

    position:absolute;

    width:7px;

    height:7px;

    border-radius:50%;

    background:#C89B3C;

    left:50%;

    transform:translateX(-50%);

    top:8px;

}


/*=====================================================
            PREMIUM GLOW
======================================================*/

.hero-section::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(200,155,60,.20),
    transparent 70%);

    right:-150px;

    top:-180px;

}

.hero-section::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(255,255,255,.60),
    transparent 75%);

    left:-150px;

    bottom:-150px;

}


/*=====================================================
            IMAGE SHADOW
======================================================*/

.hero-main-image{

    filter:

    drop-shadow(0 45px 80px rgba(0,0,0,.18));

}


/*=====================================================
        BUTTON GLOW
======================================================*/

.btn-shop{

    position:relative;

    overflow:hidden;

}

.btn-shop::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.5),

        transparent

    );

    transition:.7s;

}

.btn-shop:hover::before{

    left:120%;

}

/*=====================================================
        CHAPTER 3 - PART 2C
        PREMIUM HERO ANIMATIONS
======================================================*/

/* Smooth transitions */

.hero-section *{
    transition:
        transform .45s ease,
        box-shadow .45s ease,
        background .45s ease,
        color .35s ease,
        opacity .35s ease;
}

/* -------------------------------
   Floating Shapes Animation
--------------------------------*/

.shape1{
    animation:shapeFloat1 14s ease-in-out infinite;
}

.shape2{
    animation:shapeFloat2 18s ease-in-out infinite;
}

.shape3{
    animation:shapeFloat3 16s ease-in-out infinite;
}

.shape4{
    animation:shapeFloat4 20s ease-in-out infinite;
}

/* -------------------------------
   Hero Image
--------------------------------*/

.hero-main-image{

    animation:
        heroImageFloat 6s ease-in-out infinite;

    transform-origin:center;

}

/* -------------------------------
   Floating Cards
--------------------------------*/

.card1{

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

}

.card2{

    animation:
        cardFloat2 6s ease-in-out infinite;

}

.card3{

    animation:
        cardFloat3 7s ease-in-out infinite;

}

/* Hover */

.floating-card:hover{

    transform:
        translateY(-12px)
        scale(1.05);

}

/* -------------------------------
   Statistics
--------------------------------*/

.stat{

    transition:.35s;

}

.stat:hover{

    transform:translateY(-8px);

}

.stat:hover h2{

    color:#b88418;

}

/* -------------------------------
   Buttons
--------------------------------*/

.btn-shop,
.btn-whatsapp{

    position:relative;

}

.btn-shop:hover{

    box-shadow:
    0 18px 45px rgba(200,155,60,.45);

}

.btn-whatsapp:hover{

    box-shadow:
    0 18px 45px rgba(37,211,102,.35);

}

/* -------------------------------
   Hero Title
--------------------------------*/

.hero-title{

    overflow:hidden;

}

.hero-title span{

    display:inline-block;

}

/* -------------------------------
   Scroll Indicator
--------------------------------*/

.scroll-indicator span::before{

    animation:scrollWheel 2s infinite;

}

/* -------------------------------
   Background Glow
--------------------------------*/

.hero-section::before{

    animation:glowOne 10s linear infinite alternate;

}

.hero-section::after{

    animation:glowTwo 8s linear infinite alternate;

}

/*=====================================================
                KEYFRAMES
======================================================*/

@keyframes heroImageFloat{

    0%{

        transform:
        translateY(0px)
        rotate(0deg);

    }

    50%{

        transform:
        translateY(-18px)
        rotate(1deg);

    }

    100%{

        transform:
        translateY(0px)
        rotate(0deg);

    }

}

/* Floating Cards */

@keyframes cardFloat1{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes cardFloat2{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(12px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes cardFloat3{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/* Decorative Shapes */

@keyframes shapeFloat1{

    50%{

        transform:
        translate(40px,-30px)
        rotate(25deg);

    }

}

@keyframes shapeFloat2{

    50%{

        transform:
        translate(-30px,40px)
        rotate(-20deg);

    }

}

@keyframes shapeFloat3{

    50%{

        transform:
        translate(20px,-20px);

    }

}

@keyframes shapeFloat4{

    50%{

        transform:
        translate(-25px,-35px);

    }

}

/* Scroll */

@keyframes scrollWheel{

    0%{

        top:8px;

        opacity:1;

    }

    100%{

        top:26px;

        opacity:0;

    }

}

/* Glow */

@keyframes glowOne{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.15);

    }

}

@keyframes glowTwo{

    from{

        transform:scale(.95);

    }

    to{

        transform:scale(1.1);

    }

}
/*=====================================================
        HERO RESPONSIVE
======================================================*/

/*====================================================
        CHAPTER 4A-1
        PREMIUM CATEGORIES
====================================================*/

/* ============================================
        PREMIUM CATEGORY SECTION
============================================ */


.categories-section{

position:relative;

padding:70px 0;

overflow:hidden;

background:#f8f6f0;

}





/* Background Orbs */

.categories-section .orb{

position:absolute;

border-radius:50%;

filter:blur(80px);

opacity:.25;

z-index:0;

}



.categories-section .orb1{

width:300px;

height:300px;

background:#c9a227;

top:-100px;

left:-100px;

}



.categories-section .orb2{

width:350px;

height:350px;

background:#111;

bottom:-150px;

right:-100px;

}





.categories-section .container{

position:relative;

z-index:2;

}





/* Heading */


.section-heading{

margin-bottom:60px;

}


.section-tag{

display:inline-block;

padding:8px 22px;

border-radius:50px;

background:#c9a227;

color:white;

font-size:14px;

font-weight:600;

letter-spacing:1px;

margin-bottom:15px;

}



.section-heading h2{

font-size:45px;

font-weight:700;

color:#111;

margin-bottom:15px;

}



.section-heading p{

max-width:650px;

margin:auto;

color:#777;

font-size:17px;

line-height:1.7;

}





/* Category Card */


.category-card{

height:360px;

position:relative;

overflow:hidden;

border-radius:25px;

background:white;

box-shadow:

0 20px 50px rgba(0,0,0,.12);

transition:.5s ease;

}




.category-card img{

width:100%;

height:100%;

object-fit:cover;

transition:.6s ease;

}




.category-card:hover img{

transform:scale(1.12);

}





/* Dark Overlay */


.category-overlay{

position:absolute;

inset:0;

display:flex;

flex-direction:column;

justify-content:flex-end;

padding:30px;

background:

linear-gradient(

to top,

rgba(0,0,0,.85),

rgba(0,0,0,.1)

);


color:white;

}





.category-icon{

width:55px;

height:55px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#c9a227;

font-size:22px;

margin-bottom:15px;

}





.category-overlay h3{

font-size:25px;

font-weight:700;

margin-bottom:5px;

}



.category-overlay p{

color:#ddd;

margin-bottom:20px;

}





/* Explore Button */


.explore-btn{


display:inline-flex;

align-items:center;

gap:10px;

width:max-content;

padding:10px 22px;

border-radius:50px;

background:white;

color:#111;

text-decoration:none;

font-weight:600;

transition:.3s;


}



.explore-btn:hover{

background:#c9a227;

color:white;

transform:translateX(5px);

}





/* Hover Card */


.category-card:hover{


transform:translateY(-12px);

box-shadow:

0 30px 70px rgba(201,162,39,.25);


}





/* Cursor Spotlight */


.cursor-spotlight{

position:absolute;

width:250px;

height:250px;

background:#c9a227;

border-radius:50%;

filter:blur(120px);

opacity:.15;

}





/* Particles */


.particles span{

position:absolute;

width:8px;

height:8px;

background:#c9a227;

border-radius:50%;

animation:floatParticle 8s infinite;

opacity:.4;

}


.particles span:nth-child(1){

left:10%;

top:20%;

}



.particles span:nth-child(2){

left:30%;

top:60%;

}



.particles span:nth-child(3){

left:50%;

top:30%;

}



.particles span:nth-child(4){

right:20%;

top:40%;

}



.particles span:nth-child(5){

right:10%;

bottom:20%;

}



.particles span:nth-child(6){

left:70%;

bottom:10%;

}



@keyframes floatParticle{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-30px);

}


}





/* Responsive */


@media(max-width:992px){


.category-card{

height:330px;

}


.section-heading h2{

font-size:38px;

}


}



@media(max-width:576px){


.categories-section{

padding:70px 0;

}


.section-heading h2{

font-size:30px;

}



.category-card{

height:350px;

margin-bottom:20px;

}


.category-overlay{

padding:25px;

}


.category-overlay h3{

font-size:22px;

}


}

/*========================
        Heading
=========================*/

.section-heading{
    max-width:760px;
    margin:auto;
    margin-bottom:70px;
    position:relative;
    z-index:2;
}

.section-tag{
    display:inline-block;
    padding:10px 22px;
    background:#f6f0e5;
    color:#C89B3C;
    border-radius:40px;
    font-weight:600;
    letter-spacing:.5px;
    margin-bottom:18px;
}

.section-heading h2{
    font-family:'Playfair Display',serif;
    font-size:52px;
    font-weight:700;
    color:#222;
    margin-bottom:20px;
}

.section-heading p{
    font-size:18px;
    color:#777;
    line-height:1.8;
}

/*========================
        Card
=========================*/

.category-card{

    position:relative;

    height:420px;

    overflow:hidden;

    border-radius:28px;

    background:#fff;

    cursor:pointer;

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

    transition:.45s ease;

}

.category-card:hover{

    transform:
    translateY(-12px);

    box-shadow:
    0 30px 60px rgba(0,0,0,.15);

}

/* Image */

.category-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.category-card:hover img{

    transform:scale(1.12);

}

/* Overlay */

.category-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:30px;

    background:
    linear-gradient(

        to top,

        rgba(0,0,0,.75),

        rgba(0,0,0,.15),

        transparent

    );

}

/* Icon */

.category-icon{

    width:70px;

    height:70px;

    border-radius:50%;

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

    backdrop-filter:blur(20px);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:28px;

    margin-bottom:22px;

}

/* Title */

.category-overlay h3{

    color:#fff;

    font-size:30px;

    font-family:'Playfair Display',serif;

    margin-bottom:10px;

}

/* Product Count */

.category-overlay p{

    color:#ddd;

    font-size:16px;

    margin-bottom:22px;

}

/*====================================================
        CHAPTER 4A-2
        PREMIUM CARD EFFECTS
====================================================*/

/*-------------------------------
    Glass Overlay Panel
--------------------------------*/

.category-overlay{

    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:32px;

    background:
    linear-gradient(
        to top,
        rgba(15,15,15,.88),
        rgba(15,15,15,.35),
        transparent
    );

    transition:.45s ease;

}

/*-------------------------------
    Golden Border
--------------------------------*/

.category-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:2px;

    border-radius:28px;

    background:
    linear-gradient(
        135deg,
        transparent,
        rgba(200,155,60,.95),
        transparent
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:.45s;

    z-index:2;

}

.category-card:hover::before{

    opacity:1;

}

/*-------------------------------
    Shine Animation
--------------------------------*/

.category-card::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-60%;

    width:50%;

    height:250%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform:rotate(25deg);

    transition:1s;

    z-index:3;

}

.category-card:hover::after{

    left:150%;

}

/*-------------------------------
    Icon Animation
--------------------------------*/

.category-icon{

    transition:.45s ease;

}

.category-card:hover .category-icon{

    transform:

        rotate(12deg)

        scale(1.12);

    background:#C89B3C;

    color:#fff;

}

/*-------------------------------
    Heading Animation
--------------------------------*/

.category-overlay h3{

    transition:.35s;

}

.category-card:hover h3{

    color:#ffe8a6;

    transform:translateX(8px);

}

/*-------------------------------
    Product Count
--------------------------------*/

.category-overlay p{

    transition:.35s;

}

.category-card:hover p{

    color:#fff;

    transform:translateX(8px);

}

/*-------------------------------
    Explore Button
--------------------------------*/

.explore-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    width:max-content;

    padding:13px 24px;

    border-radius:40px;

    background:#C89B3C;

    color:#fff;

    font-weight:600;

    text-decoration:none;

    overflow:hidden;

    position:relative;

    transition:.4s;

}

.explore-btn i{

    transition:.35s;

}

.category-card:hover .explore-btn{

    background:#fff;

    color:#C89B3C;

}

.category-card:hover .explore-btn i{

    transform:translateX(6px);

}

/*-------------------------------
    Button Shine
--------------------------------*/

.explore-btn::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transition:.7s;

}

.category-card:hover .explore-btn::before{

    left:120%;

}

/*-------------------------------
    Card Glow
--------------------------------*/

.category-card:hover{

    box-shadow:

        0 35px 70px rgba(0,0,0,.18),

        0 0 40px rgba(200,155,60,.18);

}

/*-------------------------------
    Image Brightness
--------------------------------*/

.category-card img{

    filter:brightness(.92);

}

.category-card:hover img{

    filter:brightness(1.05);

}

/*-------------------------------
    Overlay Enhancement
--------------------------------*/

.category-card:hover .category-overlay{

    background:

    linear-gradient(

        to top,

        rgba(0,0,0,.92),

        rgba(0,0,0,.45),

        rgba(0,0,0,.08)

    );

}

/*====================================================
        CHAPTER 4A-3
        LUXURY FINISHING EFFECTS
====================================================*/

/* Decorative Grid Pattern */

.categories-section{

    background-image:

    radial-gradient(circle at 1px 1px,
    rgba(200,155,60,.08) 1px,
    transparent 0);

    background-size:40px 40px;

}

/* Floating Decorative Orbs */

.categories-section .orb{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    filter:blur(25px);

    opacity:.25;

}

.categories-section .orb1{

    width:220px;

    height:220px;

    background:#C89B3C;

    top:120px;

    left:-100px;

    animation:orbFloat1 16s ease-in-out infinite;

}

.categories-section .orb2{

    width:170px;

    height:170px;

    background:#e8d7aa;

    right:-60px;

    bottom:120px;

    animation:orbFloat2 18s ease-in-out infinite;

}

/* Premium Divider */

.section-heading::after{

    content:"";

    display:block;

    width:120px;

    height:4px;

    margin:25px auto 0;

    border-radius:10px;

    background:linear-gradient(
        90deg,
        transparent,
        #C89B3C,
        transparent
    );

}

/* Editorial Heading */

.section-heading h2{

    letter-spacing:.5px;

    transition:.4s;

}

.section-heading:hover h2{

    color:#C89B3C;

}

/* Premium Card Corners */

.category-card{

    border:1px solid rgba(255,255,255,.4);

}

/* 3D Perspective */

.category-card{

    transform-style:preserve-3d;

    perspective:1200px;

}

/* Content Depth */

.category-overlay{

    transform:translateZ(30px);

}

.category-icon{

    transform:translateZ(45px);

}

.category-overlay h3{

    transform:translateZ(35px);

}

.category-overlay p{

    transform:translateZ(25px);

}

.explore-btn{

    transform:translateZ(50px);

}

/* Soft Pulse */

.category-card:hover .category-icon{

    animation:pulseGold 1.8s infinite;

}

/* Button Shadow */

.explore-btn{

    box-shadow:

    0 15px 35px rgba(200,155,60,.30);

}

/* Explore Arrow */

.explore-btn i{

    transition:.35s;

}

.category-card:hover .explore-btn i{

    transform:translateX(8px);

}

/* Card Hover */

.category-card:hover{

    transform:

        translateY(-12px)

        rotateX(2deg)

        rotateY(-2deg);

}

/* Smooth Card Entrance */

.category-card{

    opacity:0;

    transform:translateY(40px);

    animation:fadeCard .8s forwards;

}

.category-card:nth-child(1){animation-delay:.05s;}
.category-card:nth-child(2){animation-delay:.15s;}
.category-card:nth-child(3){animation-delay:.25s;}
.category-card:nth-child(4){animation-delay:.35s;}
.category-card:nth-child(5){animation-delay:.45s;}
.category-card:nth-child(6){animation-delay:.55s;}
.category-card:nth-child(7){animation-delay:.65s;}
.category-card:nth-child(8){animation-delay:.75s;}

/* Premium Hover Glow */

.category-card:hover{

    outline:1px solid rgba(200,155,60,.25);

}

/*=========================
        Keyframes
==========================*/

@keyframes fadeCard{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes pulseGold{

    0%{

        box-shadow:0 0 0 rgba(200,155,60,.35);

    }

    50%{

        box-shadow:0 0 28px rgba(200,155,60,.55);

    }

    100%{

        box-shadow:0 0 0 rgba(200,155,60,.35);

    }

}

@keyframes orbFloat1{

    50%{

        transform:

        translate(45px,-35px)

        scale(1.15);

    }

}

@keyframes orbFloat2{

    50%{

        transform:

        translate(-35px,30px)

        scale(.9);

    }

}

/* Smooth Scrolling Feeling */

.category-card,
.category-overlay,
.category-icon,
.explore-btn{

    will-change:transform;

}

/* Mouse Glow */

.mouse-glow{

position:absolute;

width:180px;

height:180px;

border-radius:50%;

background:radial-gradient(

circle,

rgba(255,255,255,.30),

transparent 70%

);

pointer-events:none;

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

opacity:0;

transition:.2s;

z-index:1;

}

.category-card:hover .mouse-glow{

opacity:1;

}

/*==========================================
        Magnetic Button
==========================================*/

.explore-btn{

transition:.3s ease;

}

/*==========================================
        Card Entrance
==========================================*/

.category-card{

will-change:transform;

backface-visibility:hidden;

}

/*==========================================
        Smooth Image
==========================================*/

.category-card img{

transition:
transform .5s ease,
filter .5s ease;

}

/*==========================================
        Better Glow
==========================================*/

.mouse-glow{

position:absolute;

width:220px;

height:220px;

border-radius:50%;

pointer-events:none;

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

background:
radial-gradient(circle,
rgba(255,255,255,.35),
transparent 70%);

opacity:0;

transition:.25s;

mix-blend-mode:screen;

}

.category-card:hover .mouse-glow{

opacity:1;

}

/*====================================================
        CHAPTER 4B-3
        PREMIUM EFFECTS
====================================================*/

/* Cursor Spotlight */

.cursor-spotlight{

position:absolute;

width:450px;

height:450px;

border-radius:50%;

pointer-events:none;

background:radial-gradient(circle,
rgba(200,155,60,.14),
transparent 70%);

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

opacity:0;

transition:opacity .3s;

z-index:0;

}

/* Particles */

.particles{

position:absolute;

inset:0;

pointer-events:none;

overflow:hidden;

z-index:0;

}

.particles span{

position:absolute;

width:10px;

height:10px;

border-radius:50%;

background:rgba(200,155,60,.28);

animation:particleFloat 16s linear infinite;

}

.particles span:nth-child(1){

left:8%;
bottom:-30px;
animation-delay:0s;

}

.particles span:nth-child(2){

left:28%;
bottom:-40px;
animation-delay:2s;

}

.particles span:nth-child(3){

left:48%;
bottom:-20px;
animation-delay:4s;

}

.particles span:nth-child(4){

left:68%;
bottom:-50px;
animation-delay:6s;

}

.particles span:nth-child(5){

left:84%;
bottom:-35px;
animation-delay:8s;

}

.particles span:nth-child(6){

left:94%;
bottom:-25px;
animation-delay:10s;

}

@keyframes particleFloat{

0%{

transform:translateY(0) scale(.5);
opacity:0;

}

20%{

opacity:1;

}

100%{

transform:translateY(-900px) scale(1.4);

opacity:0;

}

}

/* Ripple */

.category-ripple{

position:absolute;

border-radius:50%;

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

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

animation:ripple .7s ease-out;

pointer-events:none;

}

@keyframes ripple{

to{

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

opacity:0;

}

}
/*=====================================================
            CHAPTER 5B
        PREMIUM PRODUCT SECTION
======================================================*/

.products-section{

    position:relative;

    padding:120px 0;

    background:#f8f7f4;

    overflow:hidden;

}

/* Decorative Background */

.products-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(200,155,60,.12),
    transparent 70%);

    top:-180px;

    right:-180px;

}

.products-section::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(220,210,180,.15),
    transparent 70%);

    left:-150px;

    bottom:-150px;

}

/*=========================
      Filter Buttons
==========================*/

.product-filters{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

margin-bottom:60px;

}

.filter-btn{

padding:14px 28px;

border:none;

border-radius:50px;

background:#fff;

color:#444;

font-weight:600;

transition:.4s;

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

}

.filter-btn:hover{

background:#C89B3C;

color:#fff;

transform:translateY(-5px);

}

.filter-btn.active{

background:#C89B3C;

color:#fff;

}

/*=========================
      Product Card
==========================*/

.product-card{

position:relative;

background:#fff;

border-radius:25px;

overflow:hidden;

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

transition:.45s;

height:100%;

}

.product-card:hover{

transform:translateY(-12px);

box-shadow:0 35px 70px rgba(0,0,0,.16);

}

/* Image */

.product-card img{

width:100%;

height:300px;

object-fit:cover;

transition:1s;

}

.product-card:hover img{

transform:scale(1.08);

}

/* Content */

.product-content{

padding:28px;

}

/* Rating */

.rating{

color:#FFC107;

font-size:15px;

margin-bottom:12px;

letter-spacing:2px;

}

/* Title */

.product-content h4{

font-size:24px;

font-family:'Playfair Display',serif;

margin-bottom:15px;

color:#222;

transition:.35s;

}

.product-card:hover h4{

color:#C89B3C;

}

/* Price */

.price{

display:flex;

align-items:center;

gap:12px;

margin-bottom:22px;

}

.new-price{

font-size:22px;

font-weight:700;

color:#C89B3C;

}

.old-price{

text-decoration:line-through;

color:#999;

}

/*=====================================================
        CHAPTER 5B - PART 2
        PREMIUM PRODUCT EFFECTS
======================================================*/

/* Sale Badge */

.sale-badge{

position:absolute;

top:18px;

left:18px;

background:linear-gradient(135deg,#d4af37,#b8860b);

color:#fff;

padding:8px 18px;

border-radius:30px;

font-size:13px;

font-weight:700;

z-index:5;

box-shadow:0 10px 25px rgba(212,175,55,.35);

animation:salePulse 2.5s infinite;

}

/* Product Buttons */

.product-buttons{

display:flex;

gap:12px;

margin-top:20px;

}

/* Quick View */

.quick-btn{

flex:1;

padding:14px;

border:none;

border-radius:50px;

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

backdrop-filter:blur(20px);

color:#222;

font-weight:600;

cursor:pointer;

transition:.35s;

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

}

.quick-btn:hover{

background:#111;

color:#fff;

transform:translateY(-4px);

}

/* WhatsApp Button */

.order-btn{

flex:1;

display:flex;

justify-content:center;

align-items:center;

padding:14px;

border-radius:50px;

background:#25D366;

color:#fff;

font-weight:600;

text-decoration:none;

transition:.35s;

box-shadow:0 12px 28px rgba(37,211,102,.35);

}

.order-btn:hover{

background:#1faa55;

color:#fff;

transform:translateY(-4px);

}

/* Product Overlay */

.product-card{

position:relative;

}

.product-card::before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(

to top,

rgba(0,0,0,.10),

transparent 45%

);

opacity:0;

transition:.4s;

z-index:1;

pointer-events:none;

}

.product-card:hover::before{

opacity:1;

}

/* Shine Effect */

.product-card::after{

content:"";

position:absolute;

top:-120%;

left:-60%;

width:45%;

height:250%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent

);

transform:rotate(25deg);

transition:1s;

z-index:3;

pointer-events:none;

}

.product-card:hover::after{

left:150%;

}

/* Image */

.product-card img{

display:block;

}

/* Content Above Overlay */

.product-content,

.sale-badge{

position:relative;

z-index:5;

}

/* Card Glow */

.product-card:hover{

box-shadow:

0 35px 70px rgba(0,0,0,.16),

0 0 35px rgba(200,155,60,.18);

}

/* Price Animation */

.product-card:hover .new-price{

transform:scale(1.05);

display:inline-block;

transition:.3s;

}

/* Rating Animation */

.product-card:hover .rating{

letter-spacing:3px;

transition:.3s;

}

/* Sale Badge Animation */

@keyframes salePulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}
/* Wishlist */

.wishlist-btn{

position:absolute;

top:18px;

right:18px;

width:46px;

height:46px;

border:none;

border-radius:50%;

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

backdrop-filter:blur(15px);

cursor:pointer;

z-index:6;

transition:.35s;

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

}

.wishlist-btn i{

font-size:18px;

color:#666;

transition:.3s;

}

.wishlist-btn:hover{

background:#ff4d6d;

transform:scale(1.08);

}

.wishlist-btn:hover i{

color:#fff;

}






/* Active Wishlist */

.wishlist-btn.active{

background:#ff4d6d;

}

.wishlist-btn.active i{

color:#fff;

}

/* Product Animation */

.product-item{

transition:

opacity .35s,

transform .35s;

}



/*=====================================================
        CHAPTER 5D-2
        PREMIUM PRODUCT MODAL
======================================================*/

.product-modal{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

display:flex;

justify-content:center;
align-items:center;

padding:40px;

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

backdrop-filter:blur(12px);

opacity:0;
visibility:hidden;

transition:.45s ease;

z-index:9999;

}

/* Open */

.product-modal.active{

opacity:1;

visibility:visible;

}

/* Overlay */

.modal-overlay{

position:absolute;

inset:0;

cursor:pointer;

}

/* Box */

.modal-box{

position:relative;

width:100%;

max-width:1180px;

background:#fff;

border-radius:30px;

padding:50px;

overflow:hidden;

box-shadow:

0 45px 100px rgba(0,0,0,.35);

transform:

translateY(60px)

scale(.92);

transition:.45s ease;

z-index:2;

}

.product-modal.active .modal-box{

transform:

translateY(0)

scale(1);

}

/* Decorative */

.modal-box::before{

content:"";

position:absolute;

width:350px;

height:350px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(200,155,60,.12),

transparent 70%);

top:-120px;

right:-120px;

}

/* Close */

.modal-close{

position:absolute;

top:25px;

right:25px;

width:52px;

height:52px;

border:none;

border-radius:50%;

background:#f4f4f4;

cursor:pointer;

transition:.35s;

z-index:10;

}

.modal-close i{

font-size:22px;

}

.modal-close:hover{

background:#C89B3C;

color:#fff;

transform:rotate(90deg);

}

/* Image */

.modal-image-wrapper{

position:relative;

border-radius:25px;

overflow:hidden;

background:#f8f8f8;

}

.modal-image-wrapper img{

width:100%;

height:540px;

object-fit:cover;

display:block;

transition:1s;

}

.modal-image-wrapper:hover img{

transform:scale(1.05);

}

/* Sale */

.modal-sale{

position:absolute;

top:22px;

left:22px;

background:#C89B3C;

color:#fff;

padding:10px 22px;

border-radius:30px;

font-weight:700;

box-shadow:

0 15px 30px rgba(200,155,60,.30);

}

/* Category */

.modal-category{

display:inline-block;

padding:8px 18px;

border-radius:30px;

background:#f5efe0;

color:#C89B3C;

font-weight:600;

margin-bottom:20px;

}

/* Title */

.modal-content h2{

font-size:42px;

font-family:'Playfair Display',serif;

color:#222;

margin-bottom:18px;

}

/* Rating */

.modal-rating{

color:#FFC107;

font-size:20px;

letter-spacing:4px;

margin-bottom:18px;

}

/* Price */

.modal-price{

margin-bottom:25px;

}

.modal-price span{

font-size:34px;

font-weight:700;

color:#C89B3C;

}

/* Description */

.modal-content p{

font-size:17px;

line-height:1.9;

color:#666;

margin-bottom:25px;

}

/* Features */

.modal-features{

padding:0;

margin:0 0 35px;

list-style:none;

}

.modal-features li{

margin-bottom:14px;

font-size:16px;

color:#444;

}

/* Buttons */

.modal-buttons{

display:flex;

gap:15px;

align-items:center;

}

/* WhatsApp */

.modal-order{

flex:1;

padding:16px;

border-radius:50px;

display:flex;

justify-content:center;

align-items:center;

background:#25D366;

color:#fff;

text-decoration:none;

font-weight:700;

transition:.35s;

}

.modal-order:hover{

background:#1faa55;

color:#fff;

transform:translateY(-4px);

}

/* Wishlist */

.modal-wishlist{

width:58px;

height:58px;

border:none;

border-radius:50%;

background:#f5f5f5;

cursor:pointer;

transition:.35s;

}

.modal-wishlist i{

font-size:22px;

}

.modal-wishlist:hover{

background:#ff4d6d;

color:#fff;

transform:scale(1.08);

}


/*=====================================
    MODAL IMAGE ANIMATION
======================================*/

.modal-image-wrapper img{

opacity:0;

transform:scale(.92);

animation:modalImage .5s forwards;

}

@keyframes modalImage{

to{

opacity:1;

transform:scale(1);

}

}

/*=====================================
    CONTENT ANIMATION
======================================*/

.modal-content{

opacity:0;

transform:translateY(40px);

animation:modalContent .55s .15s forwards;

}

@keyframes modalContent{

to{

opacity:1;

transform:translateY(0);

}

}
/*=====================================================
        CHAPTER 5D-4
======================================================*/

/* Thumbnail Gallery */

.thumbnail-gallery{

display:flex;

justify-content:center;

gap:12px;

margin-top:22px;

flex-wrap:wrap;

}

.thumb{

width:85px;

height:85px;

object-fit:cover;

border-radius:16px;

cursor:pointer;

border:3px solid transparent;

transition:.35s;

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

}

.thumb:hover{

transform:translateY(-5px);

}

.thumb.active{

border-color:#C89B3C;

}

/* Zoom */

.modal-image-wrapper{

overflow:hidden;

}

.modal-image-wrapper img{

cursor:zoom-in;

transform-origin:center;

transition:transform .35s ease;

}

/* Product Info */

.product-extra{

margin:30px 0;

display:flex;

flex-direction:column;

gap:15px;

}

.product-extra div{

display:flex;

align-items:center;

gap:12px;

padding:14px 18px;

background:#fafafa;

border-radius:15px;

font-weight:600;

color:#555;

transition:.35s;

}

.product-extra div:hover{

background:#fff5df;

transform:translateX(8px);

}

.product-extra i{

color:#C89B3C;

font-size:18px;

}

/* Stock */

.stock{

border-left:5px solid #28a745;

}

/* Delivery */

.delivery{

border-left:5px solid #0d6efd;

}

/* Returns */

.returns{

border-left:5px solid #ff9800;

}


/*=====================================================
        CHAPTER 5D-5
        FINAL MODAL POLISH
======================================================*/

/* Product Tags */

.modal-tags{

display:flex;

gap:10px;

flex-wrap:wrap;

margin:18px 0 25px;

}

.modal-tags .tag{

padding:8px 16px;

border-radius:30px;

font-size:13px;

font-weight:700;

letter-spacing:.5px;

color:#fff;

}

.tag.new{

background:#28a745;

}

.tag.bestseller{

background:#C89B3C;

}

.tag.limited{

background:#dc3545;

}

/* Share Section */

.modal-share{

display:flex;

align-items:center;

gap:14px;

margin-top:30px;

}

.modal-share span{

font-weight:600;

color:#444;

}

.modal-share a{

width:42px;

height:42px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:#f5f5f5;

color:#333;

text-decoration:none;

transition:.35s;

}

.modal-share a:hover{

background:#C89B3C;

color:#fff;

transform:translateY(-5px);

}

/* Floating Decorative Glow */

.modal-box::after{

content:"";

position:absolute;

width:220px;

height:220px;

border-radius:50%;

background:radial-gradient(circle,

rgba(200,155,60,.18),

transparent 70%);

bottom:-80px;

left:-80px;

pointer-events:none;

}

/* Wishlist */

.modal-wishlist.active{

background:#ff4d6d;

color:#fff;

}

/* Premium Scrollbar */

.product-modal::-webkit-scrollbar{

width:8px;

}

.product-modal::-webkit-scrollbar-thumb{

background:#C89B3C;

border-radius:30px;

}

/*====================================================
        CHAPTER 6A
        PREMIUM TESTIMONIALS
====================================================*/

.testimonials-section{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:linear-gradient(
    180deg,
    #ffffff,
    #faf8f2);

}

/* Decorative Background */

.testimonials-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(200,155,60,.12),
    transparent 70%);

    top:-180px;

    right:-180px;

}

.testimonials-section::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(200,155,60,.08),
    transparent 70%);

    left:-120px;

    bottom:-120px;

}

/* Slider */

.testimonial-slider{

    overflow:hidden;

    position:relative;

    margin-top:70px;

}

/* Track */

.testimonial-track{

    display:flex;

    gap:35px;

    align-items:stretch;

}

/* Card */

.testimonial-card{

    min-width:360px;

    background:#fff;

    border-radius:30px;

    padding:35px;

    position:relative;

    overflow:hidden;

    transition:.45s;

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

}

/* Hover */

.testimonial-card:hover{

    transform:translateY(-12px);

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

}

/* Decorative Quote */

.testimonial-card::before{

    content:"❝";

    position:absolute;

    right:30px;

    top:10px;

    font-size:90px;

    color:rgba(200,155,60,.08);

    font-family:serif;

}

/* Customer Image */

.customer-image{

    width:95px;

    height:95px;

    border-radius:50%;

    overflow:hidden;

    margin-bottom:20px;

    border:5px solid #C89B3C;

}

.customer-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/* Stars */

.stars{

    color:#FFC107;

    font-size:18px;

    letter-spacing:3px;

    margin-bottom:18px;

}

/* Review */

.testimonial-card p{

    color:#666;

    line-height:1.9;

    font-size:16px;

    margin-bottom:30px;

}

/* Name */

.customer-info h4{

    margin:0;

    color:#222;

    font-size:23px;

    font-family:'Playfair Display',serif;

}

.customer-info span{

    color:#888;

    display:block;

    margin-top:5px;

}

/* Verified */

.verified{

    display:inline-block;

    margin-top:22px;

    padding:10px 20px;

    background:#ecf9f1;

    color:#28a745;

    border-radius:30px;

    font-size:14px;

    font-weight:700;

}

/* Glow */

.testimonial-card:hover{

    box-shadow:

    0 30px 70px rgba(0,0,0,.15),

    0 0 35px rgba(200,155,60,.15);

}



/*=====================================================
        CHAPTER 6B
======================================================*/

.testimonial-track{

display:flex;

width:max-content;

will-change:transform;

}

/* Pause Animation Smooth */

.testimonial-slider{

cursor:grab;

}

.testimonial-slider:active{

cursor:grabbing;

}

/* Better Card Transition */

.testimonial-card{

transition:

transform .4s ease,

box-shadow .4s ease;

}

.review-actions{

margin-top:22px;

}

.like-review{

width:46px;

height:46px;

border:none;

border-radius:50%;

background:#f5f5f5;

cursor:pointer;

transition:.35s;

}

.like-review i{

font-size:18px;

}

.like-review:hover{

background:#ff4d6d;

color:#fff;

transform:scale(1.1);

}

.like-review.active{

background:#ff4d6d;

color:#fff;

}

/*=====================================================
        CHAPTER 6C
        TRUST STATS
======================================================*/

.trust-stats{

display:grid;

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

gap:25px;

margin:60px 0;

}

.stat-box{

background:#fff;

padding:35px 25px;

border-radius:24px;

text-align:center;

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

transition:.4s;

}

.stat-box:hover{

transform:translateY(-10px);

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

}

.stat-box i{

font-size:40px;

color:#C89B3C;

margin-bottom:20px;

}

.stat-box h3{

font-size:34px;

font-weight:700;

color:#222;

margin-bottom:10px;

}

.stat-box p{

margin:0;

color:#777;

font-size:15px;

}

/*=====================================================
        CHAPTER 6D
        LUXURY REVIEW EFFECTS
======================================================*/

/* Decorative Orbs */

.review-orb{

position:absolute;

border-radius:50%;

pointer-events:none;

filter:blur(35px);

opacity:.25;

z-index:0;

}

.orb-left{

width:260px;

height:260px;

background:#C89B3C;

top:80px;

left:-120px;

animation:reviewFloat1 16s ease-in-out infinite;

}

.orb-right{

width:220px;

height:220px;

background:#f0d48d;

bottom:80px;

right:-100px;

animation:reviewFloat2 18s ease-in-out infinite;

}

/* Floating Particles */

.review-particles{

position:absolute;

inset:0;

overflow:hidden;

pointer-events:none;

z-index:0;

}

.review-particles span{

position:absolute;

width:8px;

height:8px;

border-radius:50%;

background:rgba(200,155,60,.35);

animation:reviewParticle 14s linear infinite;

}

.review-particles span:nth-child(1){left:8%;bottom:-20px;animation-delay:0s;}
.review-particles span:nth-child(2){left:25%;bottom:-35px;animation-delay:2s;}
.review-particles span:nth-child(3){left:42%;bottom:-25px;animation-delay:4s;}
.review-particles span:nth-child(4){left:63%;bottom:-30px;animation-delay:6s;}
.review-particles span:nth-child(5){left:81%;bottom:-40px;animation-delay:8s;}
.review-particles span:nth-child(6){left:94%;bottom:-25px;animation-delay:10s;}

/* Glass Card */

.testimonial-card{

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

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.45);

}

/* Border Glow */

.testimonial-card:hover{

border-color:rgba(200,155,60,.35);

}

/* Image */

.customer-image{

transition:.45s;

}

.testimonial-card:hover .customer-image{

transform:scale(1.08) rotate(3deg);

}

/* Stars */

.testimonial-card:hover .stars{

letter-spacing:5px;

}

/* Verified Badge */

.verified{

transition:.35s;

}

.testimonial-card:hover .verified{

background:#28a745;

color:#fff;

}

/* Quote */

.testimonial-card::before{

transition:.45s;

}

.testimonial-card:hover::before{

transform:scale(1.15);

color:rgba(200,155,60,.18);

}

/* Floating Animations */

@keyframes reviewFloat1{

50%{

transform:translate(40px,-30px) scale(1.1);

}

}

@keyframes reviewFloat2{

50%{

transform:translate(-35px,30px) scale(.9);

}

}

@keyframes reviewParticle{

0%{

transform:translateY(0) scale(.4);

opacity:0;

}

20%{

opacity:1;

}

100%{

transform:translateY(-900px) scale(1.4);

opacity:0;

}
}
.testimonial-card:hover p{

color:#444;

}

.testimonial-card:hover h4{

color:#C89B3C;

transition:.35s;

}


/*=====================================================
        CHAPTER 6E
        TRUST SHOWCASE
======================================================*/

.trust-showcase{

display:grid;

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

gap:30px;

margin-top:90px;

}

.trust-card{

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

backdrop-filter:blur(15px);

padding:40px 30px;

border-radius:28px;

text-align:center;

transition:.45s;

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

border:1px solid rgba(255,255,255,.5);

position:relative;

overflow:hidden;

}

.trust-card::before{

content:"";

position:absolute;

top:-100%;

left:-50%;

width:60%;

height:250%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.45),
transparent
);

transform:rotate(25deg);

transition:1s;

}

.trust-card:hover::before{

left:160%;

}

.trust-card:hover{

transform:translateY(-12px);

box-shadow:
0 35px 70px rgba(0,0,0,.15),
0 0 30px rgba(200,155,60,.18);

}

.trust-icon{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(
135deg,
#C89B3C,
#E7C873);

margin-bottom:25px;

}

.trust-icon i{

font-size:34px;

color:#fff;

}

.trust-card h3{

font-family:'Playfair Display',serif;

font-size:26px;

margin-bottom:15px;

color:#222;

}

.trust-card p{

color:#666;

line-height:1.8;

font-size:15px;

}


/*=====================================================
        CHAPTER 7B
        PREMIUM GALLERY
======================================================*/

.gallery-section{

    padding:120px 0;

    background:#faf8f2;

    position:relative;

    overflow:hidden;

}

/* Decorative Background */

.gallery-section::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(200,155,60,.12),
    transparent 70%);

    top:-120px;

    right:-120px;

}

.gallery-grid{

    display:grid;

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

    grid-auto-rows:220px;

    gap:22px;

    margin-top:70px;

}

/* Gallery Card */

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    cursor:pointer;

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

    transition:.45s;

}

/* Different Heights */

.gallery-item:nth-child(1){

    grid-row:span 2;

}

.gallery-item:nth-child(4){

    grid-row:span 2;

}

.gallery-item:nth-child(6){

    grid-column:span 2;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

/* Overlay */

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:30px;

    background:linear-gradient(
    transparent,
    rgba(0,0,0,.75));

    opacity:0;

    transition:.4s;

}

.gallery-item:hover .gallery-overlay{

    opacity:1;

}

.gallery-item:hover img{

    transform:scale(1.12);

}

/* Category */

.gallery-overlay span{

    display:inline-block;

    width:max-content;

    background:#C89B3C;

    color:#fff;

    padding:8px 18px;

    border-radius:30px;

    font-size:13px;

    margin-bottom:14px;

}

/* Title */

.gallery-overlay h4{

    color:#fff;

    font-size:28px;

    font-family:'Playfair Display',serif;

    margin-bottom:20px;

}

/* Button */

.gallery-view{

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#222;

    cursor:pointer;

    transition:.35s;

}

.gallery-view i{

    font-size:20px;

}

.gallery-view:hover{

    background:#C89B3C;

    color:#fff;

    transform:rotate(90deg) scale(1.08);

}

.gallery-item:hover{

    transform:translateY(-10px);

    box-shadow:

    0 35px 70px rgba(0,0,0,.18);

}


/*=====================================================
        CHAPTER 7C
        LIGHTBOX
======================================================*/

.gallery-lightbox{

position:fixed;

inset:0;

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

backdrop-filter:blur(12px);

display:flex;

justify-content:center;

align-items:center;

opacity:0;

visibility:hidden;

transition:.4s;

z-index:99999;

}

.gallery-lightbox.active{

opacity:1;

visibility:visible;

}

.lightbox-overlay{

position:absolute;

inset:0;

}

.lightbox-content{

position:relative;

max-width:1100px;

width:92%;

text-align:center;

z-index:2;

}

#lightboxImage{

max-width:100%;

max-height:75vh;

border-radius:20px;

box-shadow:0 30px 80px rgba(0,0,0,.45);

}

.lightbox-caption{

margin-top:25px;

color:#fff;

}

.lightbox-caption h3{

font-family:'Playfair Display',serif;

font-size:34px;

margin-bottom:10px;

}

.lightbox-caption span{

display:inline-block;

background:#C89B3C;

padding:8px 18px;

border-radius:30px;

}

.lightbox-close,
.lightbox-prev,
.lightbox-next{

position:absolute;

width:60px;

height:60px;

border:none;

border-radius:50%;

background:#fff;

cursor:pointer;

transition:.35s;

}

.lightbox-close{

top:-20px;

right:-20px;

}

.lightbox-prev{

left:-80px;

top:50%;

transform:translateY(-50%);

}

.lightbox-next{

right:-80px;

top:50%;

transform:translateY(-50%);

}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{

background:#C89B3C;

color:#fff;

}

@media(max-width:768px){

.lightbox-prev{

left:10px;

}

.lightbox-next{

right:10px;

}

.lightbox-close{

top:10px;

right:10px;

}

.lightbox-prev,
.lightbox-next,
.lightbox-close{

width:48px;

height:48px;

}

.lightbox-caption h3{

font-size:24px;

}

}


/*=========================================
        GALLERY REVEAL
=========================================*/

.gallery-item{

opacity:0;

transform:translateY(80px);

transition:

opacity .8s ease,

transform .8s ease;

}

.gallery-item.show-gallery{

opacity:1;

transform:translateY(0);

}



/*=========================================
        GALLERY PARTICLES
=========================================*/

.gallery-particles{

position:absolute;

inset:0;

pointer-events:none;

overflow:hidden;

}

.gallery-particles span{

position:absolute;

width:8px;

height:8px;

border-radius:50%;

background:rgba(200,155,60,.35);

animation:galleryParticle 15s linear infinite;

}

.gallery-particles span:nth-child(1){left:5%;bottom:-10px;}
.gallery-particles span:nth-child(2){left:20%;bottom:-30px;animation-delay:2s;}
.gallery-particles span:nth-child(3){left:40%;bottom:-20px;animation-delay:4s;}
.gallery-particles span:nth-child(4){left:65%;bottom:-30px;animation-delay:6s;}
.gallery-particles span:nth-child(5){left:82%;bottom:-15px;animation-delay:8s;}
.gallery-particles span:nth-child(6){left:95%;bottom:-25px;animation-delay:10s;}

@keyframes galleryParticle{

0%{

transform:translateY(0) scale(.4);

opacity:0;

}

20%{

opacity:1;

}

100%{

transform:translateY(-850px) scale(1.5);

opacity:0;

}

}

.gallery-item:hover{

z-index:5;

}

.gallery-item:hover img{

filter:brightness(.88);

}

.gallery-item:hover .gallery-view{

transform:scale(1.15) rotate(90deg);

}

.gallery-overlay{

backdrop-filter:blur(2px);

}



/*=====================================================
        CHAPTER 7E
======================================================*/

/* Badge */

.gallery-badge{

position:absolute;

top:18px;

left:18px;

z-index:10;

background:linear-gradient(135deg,#C89B3C,#E8C86B);

color:#fff;

padding:8px 18px;

border-radius:30px;

font-size:12px;

font-weight:700;

letter-spacing:.5px;

box-shadow:0 10px 25px rgba(200,155,60,.35);

}

/* Like */

.gallery-like{

position:absolute;

top:18px;

right:18px;

width:46px;

height:46px;

border:none;

border-radius:50%;

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

backdrop-filter:blur(10px);

cursor:pointer;

z-index:10;

transition:.35s;

}

.gallery-like i{

font-size:18px;

color:#333;

}

.gallery-like:hover{

background:#ff4d6d;

transform:scale(1.12);

}

.gallery-like:hover i{

color:#fff;

}

/* Active */

.gallery-like.active{

background:#ff4d6d;

}

.gallery-like.active i{

color:#fff;

}

/* Shimmer */

.gallery-item::after{

content:"";

position:absolute;

top:-150%;

left:-60%;

width:45%;

height:300%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.35),

transparent

);

transform:rotate(25deg);

transition:1s;

pointer-events:none;

}

.gallery-item:hover::after{

left:170%;

}

.gallery-item img{

opacity:0;

animation:galleryFade .8s forwards;

}

@keyframes galleryFade{

from{

opacity:0;

transform:scale(1.05);

}

to{

opacity:1;

transform:scale(1);

}

}


/* =====================================
   LUXURY FAQ SECTION
===================================== */

.faq-section {
    padding: 90px 0;
    background: linear-gradient(
        135deg,
        #ffffff,
        #f8f5ee
    );
    position: relative;
    overflow: hidden;
}


/* Heading */

.faq-section .section-heading {
    margin-bottom: 50px;
}


.faq-section .section-tag {

    display:inline-block;

    color:#c9a227;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:15px;

}


.faq-section h2 {

    font-size:42px;

    font-weight:700;

    color:#111;

}


.faq-section p {

    color:#666;

}



/* FAQ Wrapper */

.faq-wrapper {

    max-width:900px;

    margin:auto;

}



/* FAQ Card */

.faq-item {

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

    border:1px solid rgba(201,162,39,0.2);

    border-radius:18px;

    margin-bottom:18px;

    overflow:hidden;

    backdrop-filter:blur(12px);

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

    transition:.4s ease;

}



.faq-item:hover {

    transform:translateY(-5px);

    border-color:#c9a227;

    box-shadow:
    0 20px 45px rgba(201,162,39,.18);

}



/* Question */

.faq-question {

    padding:25px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

}



.faq-question h4 {

    margin:0;

    font-size:18px;

    font-weight:600;

    color:#222;

    transition:.3s;

}



.faq-question:hover h4 {

    color:#c9a227;

}



/* Icon */

.faq-icon {

    width:35px;

    height:35px;

    border-radius:50%;

    background:#c9a227;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    transition:.4s ease;

}



/* Answer */

.faq-answer {

    max-height:0;

    overflow:hidden;

    padding:0 30px;

    transition:max-height .5s ease,
               padding .5s ease;

}



.faq-answer p {

    font-size:15px;

    line-height:1.8;

    color:#666;

}



/* Active */

.faq-item.active .faq-answer {

    max-height:300px;

    padding-bottom:25px;

}



.faq-item.active .faq-icon {

    transform:rotate(45deg);

    background:#111;

}



/* Background Decorations */

.faq-section::before {

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:#c9a227;

    opacity:.08;

    border-radius:50%;

    top:-120px;

    left:-120px;

}



.faq-section::after {

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    background:#c9a227;

    opacity:.06;

    border-radius:50%;

    bottom:-100px;

    right:-100px;

}



/* Mobile */

@media(max-width:768px){


.faq-section{

padding:60px 15px;

}


.faq-section h2{

font-size:32px;

}


.faq-question{

padding:20px;

}


.faq-question h4{

font-size:16px;

}


.faq-answer{

padding-left:20px;

padding-right:20px;

}


}



@media(max-width:425px){

.faq-section h2{

font-size:28px;

}


.faq-question{

padding:18px;

}

}

/* =====================================
   FAQ SEARCH BOX
===================================== */


.faq-search-box{

max-width:600px;

margin:0 auto 40px;

}



.faq-search-box input{


width:100%;

padding:18px 25px;

border-radius:50px;

border:1px solid rgba(201,162,39,.3);

background:white;

font-size:16px;

outline:none;


box-shadow:

0 10px 30px rgba(0,0,0,.08);


transition:.3s ease;


}



.faq-search-box input:focus{


border-color:#c9a227;


box-shadow:

0 10px 35px rgba(201,162,39,.25);


}



.faq-search-box input::placeholder{

color:#999;

}




@media(max-width:576px){


.faq-search-box input{

padding:15px 20px;

font-size:14px;

}


}


/* =====================================
   LUXURY NEWSLETTER SECTION
===================================== */


.newsletter-section{

padding:90px 0;

background:

linear-gradient(
135deg,
#111,
#1c1c1c
);

position:relative;

overflow:hidden;

}




.newsletter-box{

max-width:1000px;

margin:auto;

padding:60px;

border-radius:25px;


background:

rgba(255,255,255,.08);


border:

1px solid rgba(201,162,39,.3);


backdrop-filter:blur(15px);


box-shadow:

0 20px 50px rgba(0,0,0,.3);


text-align:center;


}




.newsletter-tag{

color:#c9a227;

font-size:14px;

font-weight:600;

letter-spacing:2px;

text-transform:uppercase;

}



.newsletter-content h2{


margin-top:15px;

font-size:42px;

color:white;

font-weight:700;


}



.newsletter-content p{


max-width:650px;

margin:20px auto 35px;


color:#ccc;

font-size:16px;

line-height:1.8;


}




/* FORM */


.newsletter-form{


display:flex;

max-width:650px;

margin:auto;

gap:15px;


}




.newsletter-form input{


flex:1;

padding:18px 25px;


border-radius:50px;


border:none;


outline:none;


font-size:15px;


}



.newsletter-form button{


padding:18px 35px;


border-radius:50px;


border:none;


background:#c9a227;


color:white;


font-weight:600;


cursor:pointer;


transition:.3s ease;


}



.newsletter-form button:hover{


background:white;

color:#111;


}





/* Background Decoration */


.newsletter-section::before{


content:"";

position:absolute;


width:350px;

height:350px;


background:#c9a227;


opacity:.12;


border-radius:50%;


top:-150px;


right:-100px;


}




.newsletter-section::after{


content:"";

position:absolute;


width:300px;

height:300px;


background:#c9a227;


opacity:.08;


border-radius:50%;


bottom:-120px;


left:-100px;


}





/* =========================
   RESPONSIVE
========================= */


@media(max-width:768px){


.newsletter-section{

padding:60px 15px;

}



.newsletter-box{


padding:40px 20px;


}



.newsletter-content h2{


font-size:32px;


}



.newsletter-form{


flex-direction:column;


}



.newsletter-form button{


width:100%;


}



}




@media(max-width:425px){


.newsletter-content h2{


font-size:27px;


}


.newsletter-content p{


font-size:14px;


}


}
/* =====================================
        LUXURY FOOTER
===================================== */


.luxury-footer{

background:#111;

color:white;

margin:0;

padding:0;

}




.footer-grid{

display:grid;

grid-template-columns:

2fr 1fr 1fr 1fr;

gap:40px;

}




.footer-brand h3{

font-size:35px;

color:#c9a227;

margin-bottom:20px;

}



.footer-brand p{

color:#aaa;

line-height:1.8;

}




.footer-links h4,
.footer-contact h4{


font-size:18px;

margin-bottom:20px;

color:#fff;


}



.footer-links a{


display:block;

text-decoration:none;

color:#aaa;

margin-bottom:12px;

transition:.3s;


}



.footer-links a:hover{


color:#c9a227;

padding-left:5px;


}




.footer-contact p{


color:#aaa;

margin-bottom:15px;


}



.footer-contact i{

color:#c9a227;

margin-right:10px;

}



/* Social */


.footer-social{

display:flex;

gap:12px;

margin-top:25px;

}



.footer-social a{


width:40px;

height:40px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;


background:#222;

color:white;


transition:.3s;


}



.footer-social a:hover{


background:#c9a227;

transform:translateY(-5px);


}





/* Payment */


.footer-payment{


text-align:center;

border-top:1px solid rgba(255,255,255,.1);

margin-top:50px;

padding:30px 0;


}



.footer-payment p{


color:#aaa;

margin-bottom:15px;


}



.footer-payment span{


display:inline-block;

padding:10px 20px;

margin:5px;

border-radius:8px;

background:#222;

color:#c9a227;

font-size:14px;


}





/* Bottom */


.footer-bottom{


border-top:1px solid rgba(255,255,255,.1);

padding:20px 0;

text-align:center;

color:#888;


}





/* RESPONSIVE */


@media(max-width:992px){


.footer-grid{

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

}


}



@media(max-width:576px){


.footer-grid{

grid-template-columns:1fr;

text-align:center;

}



.footer-social{

justify-content:center;

}


}

/* =====================================
      PRODUCT DETAIL PAGE
===================================== */


.product-detail-section{

padding:90px 0;

background:#f8f6f0;

}



.product-detail-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}




.product-image-box{


background:white;

border-radius:25px;

padding:30px;

box-shadow:

0 20px 50px rgba(0,0,0,.1);

}



.product-image-box img{


width:100%;

height:500px;

object-fit:contain;


}




.product-info-box h1{


font-size:42px;

font-weight:700;

color:#111;

margin-bottom:20px;


}



.product-price{


font-size:30px;

font-weight:700;

color:#c9a227;

margin-bottom:25px;


}



.product-description{


color:#666;

line-height:1.8;

font-size:16px;


}




/* Quantity */


.quantity-box{


display:flex;

align-items:center;

gap:10px;

margin:30px 0;


}



.quantity-box button{


width:40px;

height:40px;

border:none;

background:#111;

color:white;

font-size:20px;

border-radius:50%;


}



.quantity-box input{


width:60px;

height:40px;

text-align:center;

border:1px solid #ddd;

}





/* WhatsApp Button */


.product-whatsapp{


display:inline-flex;

align-items:center;

gap:10px;

padding:16px 30px;

background:#25D366;

color:white;

text-decoration:none;

border-radius:50px;

font-weight:600;

transition:.3s;


}



.product-whatsapp:hover{


transform:translateY(-5px);

}





@media(max-width:768px){


.product-detail-wrapper{


grid-template-columns:1fr;


}



.product-image-box img{


height:350px;


}



.product-info-box h1{


font-size:32px;


}


}

/* =====================================
      RELATED PRODUCTS
===================================== */


.related-products-section{

padding:90px 0;

background:#fff;

}



.related-products-grid{


display:grid;

grid-template-columns:

repeat(4,1fr);

gap:30px;


}




.related-product-card{


background:white;

border-radius:20px;

overflow:hidden;


box-shadow:

0 15px 35px rgba(0,0,0,.08);


transition:.4s ease;


}




.related-product-card:hover{


transform:translateY(-10px);


box-shadow:

0 25px 50px rgba(201,162,39,.18);


}




.related-product-card a{


text-decoration:none;

color:#111;


}



.related-product-card img{


width:100%;

height:260px;

object-fit:cover;


}




.related-product-card h3{


font-size:18px;

font-weight:600;

padding:20px 20px 5px;


}



.related-price{


padding:0 20px 25px;


font-size:20px;

font-weight:700;

color:#c9a227;


}





@media(max-width:992px){


.related-products-grid{

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

}


}



@media(max-width:576px){


.related-products-grid{

grid-template-columns:1fr;

}


.related-product-card img{


height:300px;


}


}

/* ============================
     ORDER FORM
============================ */


.order-section{

padding:90px 0;

background:#f8f6f0;

}



.order-box{

max-width:600px;

margin:auto;

background:white;

padding:40px;

border-radius:25px;

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

}



.order-box h2{

text-align:center;

font-size:35px;

margin-bottom:30px;

}



.order-product{

text-align:center;

margin-bottom:30px;

}



.order-product img{

width:180px;

height:180px;

object-fit:contain;

}



.order-box input,
.order-box textarea{


width:100%;

padding:15px;

margin-bottom:15px;

border-radius:10px;

border:1px solid #ddd;

outline:none;


}



.order-box textarea{

height:120px;

resize:none;

}



.order-box button{


width:100%;

padding:16px;

border:none;

border-radius:50px;

background:#c9a227;

color:white;

font-size:17px;

font-weight:600;

cursor:pointer;


}

.product-order-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:16px 30px;

margin-left:10px;

border-radius:50px;

background:#111;

color:white;

text-decoration:none;

transition:.3s;

}



.product-order-btn:hover{

background:#c9a227;

}



@media(max-width:576px){

.product-order-btn{

margin-left:0;

margin-top:15px;

}

}

/* =========================
   ORDER ALERT
========================= */


.order-alert{

position:fixed;

top:100px;

right:30px;

padding:20px 30px;

border-radius:12px;

z-index:9999;

font-weight:600;

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

}



.order-alert.success{

background:#25D366;

color:white;

}



.order-alert.error{

background:#ff6b6b;

color:white;

}



@media(max-width:576px){


.order-alert{

left:15px;

right:15px;

text-align:center;

}

}

.product-detail-section{

padding:60px 0;

}



.product-image-box img{

max-height:450px;

width:100%;

object-fit:contain;

}



.product-detail-wrapper{

max-width:1200px;

margin:auto;

}

.product-buttons{

display:flex;

gap:15px;

margin-top:20px;

}


.view-btn,
.order-btn{

padding:12px 25px;

border-radius:30px;

text-decoration:none;

font-weight:600;

}


.view-btn{

background:#111;

color:white;

}


.order-btn{

background:#c9a227;

color:white;

}


@media(max-width:576px){

.product-buttons{

flex-direction:column;

}

}

.product-detail-section{

padding:140px 0 80px;

}


.product-detail-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}



.product-image-box{

height:450px;

background:white;

border-radius:25px;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

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

}



.product-image-box img{

width:100%;

height:100%;

object-fit:contain;

}



@media(max-width:768px){

.product-detail-wrapper{

grid-template-columns:1fr;

}


.product-detail-section{

padding-top:100px;

}

}

/* =================================
        ORDER PAGE
================================= */


.order-section{

padding:140px 0 80px;

background:#f8f6f0;

}



.order-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

}





.order-product-card,
.order-form-box{

background:white;

padding:35px;

border-radius:30px;

box-shadow:

0 20px 50px rgba(0,0,0,.08);

}




.order-product-card img{

width:100%;

height:350px;

object-fit:contain;

}



.order-product-card h2{

margin-top:25px;

font-size:30px;

}



.order-price{

font-size:28px;

font-weight:700;

color:#c9a227;

margin:15px 0;

}





.order-form-box h2{

font-size:35px;

margin-bottom:10px;

}



.order-form-box p{

color:#777;

margin-bottom:25px;

}



.order-form-box input,
.order-form-box textarea{


width:100%;

padding:15px;

margin-bottom:15px;

border-radius:12px;

border:1px solid #ddd;

font-size:15px;

}



.order-form-box textarea{

height:130px;

resize:none;

}




.order-form-box button{


width:100%;

padding:16px;

border:none;

border-radius:50px;

background:#25D366;

color:white;

font-size:18px;

font-weight:600;

cursor:pointer;

transition:.3s;

}



.order-form-box button:hover{

transform:translateY(-4px);

}



@media(max-width:768px){


.order-wrapper{

grid-template-columns:1fr;

}



.order-product-card img{

height:280px;

}


.order-section{

padding-top:100px;

}


}


/* =================================
        PRODUCT FILTER BUTTONS
================================= */


.product-filters{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

}



.filter-btn{


padding:12px 25px;

border-radius:50px;

border:1px solid #c9a227;

background:white;

color:#111;

font-weight:600;

cursor:pointer;

transition:.3s;


}



.filter-btn:hover,
.filter-btn.active{


background:#c9a227;

color:white;

transform:translateY(-3px);

}





.product-item{

transition:.4s ease;

}





@media(max-width:576px){


.product-filters{

gap:10px;

}


.filter-btn{

padding:10px 18px;

font-size:14px;

}


}