/*==========================
GOOGLE FONT
===========================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

/*==========================
RESET
===========================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

font-family:'Poppins',sans-serif;

}

html{

scroll-behavior:smooth;

}

body{

background:#f7f5f2;

color:#222;

overflow-x:hidden;

}

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

}

:root{

--brown:#5b3d2e;
--gold:#d4a64a;
--white:#fff;
--shadow:0 15px 35px rgba(0,0,0,.08);

}

.header{

position:fixed;

top:0;

left:0;

width:100%;

height:90px;

background:white;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 8%;

box-shadow:var(--shadow);

z-index:999;

}

.logo{
    display:flex;
    align-items:center;
    gap:12px;

    font-size:28px;
    font-weight:700;

    font-family:'Playfair Display',serif;

    color:var(--brown);
}

.logo i{
    font-size:30px;
    color:var(--gold);

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

    line-height:1;
}

.navbar{

display:flex;

gap:40px;

}

.navbar a{

color:#333;

font-weight:500;

transition:.3s;

}

.navbar a:hover{

color:var(--gold);

}

.icons{

display:flex;

gap:25px;

font-size:24px;

cursor:pointer;

color:var(--brown);

}

#menu-btn{

display:none;

}



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

.hero{

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

    margin:0 auto;

    min-height:100vh;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:30px;

    padding:120px 0 60px;

}

.hero-text{

    padding-right:20px;

}

.hero-text span,
.small-title{
    color:var(--gold);
    font-weight:600;
    letter-spacing:2px;
}

.hero-text h1{
    font-family:'Playfair Display',serif;
    font-size:68px;
    line-height:1.15;
    color:var(--brown);

    margin:20px 0;
}

.hero-text p{
    font-size:18px;
    line-height:1.8;
    color:#666;

    margin-bottom:35px;
}

.hero-image{

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

.hero-image img{

    width:100%;

    max-width:700px;

    max-height:650px;

    object-fit:contain;

    border-radius:20px;

}

/*==============================
BUTTONS
===============================*/

.hero-buttons{
    display:flex;
    gap:20px;
    align-items:center;
    margin-top:20px;
}

.btn{

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

    min-width:180px;

    height:55px;

    background:var(--brown);

    color:#fff;

    border-radius:50px;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}

.btn:hover{

    background:var(--gold);

    transform:translateY(-3px);

}

.btn-outline{

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

    min-width:180px;

    height:55px;

    border:2px solid var(--brown);

    color:var(--brown);

    border-radius:50px;

    font-weight:600;

    transition:.3s;

}

.btn-outline:hover{

    background:var(--brown);

    color:white;

}

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

.collections{

    padding:100px 8%;

    background:#fff;

}

.collection-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.collection-card{

    position:relative;

    overflow:hidden;

    border-radius:20px;

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

    transition:.4s;

}

.collection-card img{

    width:100%;

    height:350px;

    object-fit:cover;

    transition:.4s;

}

.collection-card:hover img{

    transform:scale(1.08);

}

.collection-content{

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    padding:30px;

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

}

.collection-content h3{

    color:#fff;

    font-size:28px;

    margin-bottom:8px;

}

.collection-content span{

    color:var(--gold);

    font-weight:600;

}

/*==============================
SECTION HEADINGS
===============================*/

.section-heading{

    text-align:center;

    margin-bottom:60px;

}

.section-heading span{

    color:var(--gold);

    font-weight:600;

    letter-spacing:2px;

    font-size:14px;

}

.section-heading h2{

    font-family:'Playfair Display',serif;

    font-size:48px;

    color:var(--brown);

    margin:15px 0;

}

.section-heading p{

    max-width:650px;

    margin:auto;

    color:#666;

    line-height:1.8;

    font-size:17px;

}

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

.gallery{

display:grid;

grid-template-columns:80px 1fr 80px;

align-items:center;

padding:140px 5%;

min-height:100vh;

}

.gallery-content{

text-align:center;

}

.gallery-content img{

    width:100%;
    max-width:900px;
    height:620px;
    object-fit:cover;

    border-radius:20px;

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

    animation:cinematicZoom 6s linear forwards;

}

.gallery-content img{

animation:fadeZoom 1s;

transform:scale(1.08);

}

.gallery-info{

margin-top:30px;

}

.gallery-info h2{

font-size:42px;

color:var(--brown);

}

.gallery-info p{

font-size:22px;

margin:20px 0;

color:#666;

}

.arrow{

background:none;

border:none;

font-size:60px;

cursor:pointer;

color:var(--brown);

transition:.3s;

}

.arrow:hover{

transform:scale(1.2);

color:var(--gold);

}

#select-design{

padding:18px 40px;

border:none;

background:var(--brown);

color:white;

font-size:18px;

border-radius:40px;

cursor:pointer;

}



@keyframes fadeZoom{

from{

opacity:0;

transform:scale(.95);

}

to{

opacity:1;

transform:scale(1.08);

}

}



/*=========================
CART ICON
=========================*/

.cart-icon{

position:relative;

cursor:pointer;

font-size:24px;

}

#cart-count{

position:absolute;

top:-8px;

right:-10px;

width:22px;

height:22px;

background:red;

color:white;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:12px;

font-weight:bold;

}

/*=========================
SHOPPING CART
=========================*/

.cart{

position:fixed;

top:0;

right:-450px;

width:400px;

height:100vh;

background:white;

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

padding:25px;

transition:.4s;

z-index:9999;

overflow:auto;

}

.cart.active{

right:0;

}

.cart h2{

margin-bottom:25px;

font-family:'Playfair Display',serif;

color:var(--brown);

}

.cart-footer{

margin-top:30px;

}

.cart-footer button{

width:100%;

padding:16px;

background:green;

color:white;

border:none;

border-radius:10px;

cursor:pointer;

font-size:17px;

}

.cart-product{

padding:15px 0;

border-bottom:1px solid #ddd;

}

.cart-product h4{

margin-bottom:8px;

color:var(--brown);

}

.cart-product p{

color:#666;

}

.cart-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

#close-cart{

font-size:26px;

cursor:pointer;

color:var(--brown);

transition:.3s;

}

#close-cart:hover{

transform:rotate(90deg);

}

/*==========================
PAGE TITLE
==========================*/

.page-title{

padding-top:140px;

text-align:center;

padding-bottom:50px;

}

.page-title h1{

font-size:52px;

font-family:'Playfair Display',serif;

color:var(--brown);

margin-bottom:15px;

}

.page-title p{

font-size:18px;

color:#777;

}



/*==========================
PRODUCT GRID
==========================*/

.products-page{

width:90%;

max-width:1300px;

margin:auto;

padding-bottom:100px;

}

#product-container{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:35px;

}

/*==========================
PRODUCT GALLERY
==========================*/

.product-images{
    width:100%;
}

.main-image{
    width:100%;
    height:320px;
    object-fit:cover;
    border-radius:12px;
    display:block;
}

/* Thumbnail Container */

.thumbnail-row{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding-bottom:8px;
    scrollbar-width:none;
}

.thumbnail-row::-webkit-scrollbar{
    display:none;
}

.thumbnail-row{
    display:flex;
    gap:10px;
    margin-top:12px;
}

.thumbnail{
    width:calc((100% - 20px) / 3);
    height:90px;
    object-fit:cover;
    border-radius:8px;
    cursor:pointer;
    border:2px solid transparent;
    transition:.3s;
}

.thumbnail:hover{
    border-color:var(--brown);
    transform:scale(1.05);
}

.thumbnail:hover{
    border-color:var(--brown);
    transform:scale(1.05);
}

/*==========================
OVERLAY
==========================*/

.overlay{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

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

opacity:0;

visibility:hidden;

transition:.3s;

z-index:9998;

}

.overlay.active{

opacity:1;

visibility:visible;

}

#gallery-image{

    width:100%;

    max-width:950px;

    height:650px;

    object-fit:cover;

    border-radius:20px;

    transition:opacity 1.5s ease;

    opacity:1;

}

@keyframes cinematic{

    0%{

        transform:scale(1);

        opacity:0;

    }

    15%{

        opacity:1;

    }

    100%{

        transform:scale(1.08);

        opacity:1;

    }

}

/*=========================
BEST SELLING
=========================*/

.best-selling{

padding:100px 8%;

background:#faf8f5;

}

.section-heading{

text-align:center;

margin-bottom:60px;

}

.section-heading h2{

font-size:45px;

color:var(--brown);

margin-bottom:15px;

}

.section-heading p{

font-size:18px;

color:#777;

}

.best-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:35px;

}

.best-card{

background:#fff;

border-radius:20px;

overflow:hidden;

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

transition:.4s;

cursor:pointer;

}

.best-card:hover{

transform:translateY(-12px);

}

.best-card img{

width:100%;

height:280px;

object-fit:cover;

transition:.6s;

}

.best-card:hover img{

transform:scale(1.08);

}

.best-card h3{

padding:25px;

font-size:28px;

color:var(--brown);

text-align:center;

}

/*=========================
WHY US
=========================*/

.why-us{

padding:100px 8%;

}

.why-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

margin-top:50px;

}

.why-box{

background:#fff;

padding:45px 30px;

border-radius:20px;

text-align:center;

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

transition:.4s;

}

.why-box:hover{

background:var(--brown);

color:#fff;

transform:translateY(-10px);

}

.why-box i{

font-size:55px;

margin-bottom:20px;

color:var(--gold);

}

.why-box:hover i{

color:#fff;

}

.why-box h3{

font-size:26px;

margin-bottom:15px;

}

.why-box p{

font-size:17px;

line-height:1.7;

}

/*=========================
CALL TO ACTION
=========================*/

.cta{

    padding:120px 8%;

    background:linear-gradient(rgba(60,40,20,.75),rgba(60,40,20,.75)),
    url("images/cta.jpg") center/cover no-repeat;

    text-align:center;

    color:#fff;

}

.cta-content{

    max-width:800px;

    margin:auto;

}

.cta h2{

    font-size:52px;

    margin-bottom:25px;

}

.cta p{

    font-size:20px;

    line-height:1.8;

    margin-bottom:45px;

}

.cta-btn{

    display:inline-block;

    padding:18px 45px;

    background:#fff;

    color:var(--brown);

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    font-size:18px;

    transition:.4s;

}

.cta-btn:hover{

    background:var(--gold);

    color:#fff;

    transform:translateY(-5px);

}

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

.footer{

    background:#2b1d12;

    color:#fff;

    padding-top:80px;

}

.footer-container{

    width:90%;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:50px;

    padding-bottom:60px;

}

.footer-box h2,
.footer-box h3{

    color:var(--gold);

    margin-bottom:25px;

}

.footer-box p{

    color:#ddd;

    line-height:1.8;

    margin-bottom:12px;

}

.footer-box a{

    display:block;

    color:#ddd;

    text-decoration:none;

    margin-bottom:15px;

    transition:.3s;

}

.footer-box a:hover{

    color:var(--gold);

    padding-left:8px;

}

.footer-box i{

    color:var(--gold);

    margin-right:10px;

}

.footer-bottom{

    text-align:center;

    padding:25px;

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

    color:#bbb;

}

/*=========================
WHATSAPP BUTTON
=========================*/

.whatsapp{

position:fixed;

bottom:30px;

right:30px;

width:65px;

height:65px;

background:#25D366;

color:white;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

font-size:34px;

text-decoration:none;

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

z-index:999;

transition:.4s;

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

}

.whatsapp:hover{

transform:scale(1.12);

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

html{

scroll-behavior:smooth;

}

section{

animation:fadeUp 1s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}
}

.order-panel{

position:fixed;

top:0;

right:-420px;

width:400px;

height:100vh;

background:#fff;

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

padding:35px;

transition:.5s;

z-index:9999;

overflow-y:auto;

}

.order-panel.active{

right:0;

}

.order-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.order-header h2{

color:var(--brown);

}

#closePanel{

font-size:35px;

cursor:pointer;

color:#666;

}

.order-panel label{

display:block;

margin-top:20px;

margin-bottom:8px;

font-weight:600;

color:var(--brown);

}

.order-panel input,

.order-panel textarea{

width:100%;

padding:14px;

border:1px solid #ddd;

border-radius:10px;

font-size:16px;

}

.order-panel textarea{

height:120px;

resize:none;

}

#sendWhatsapp{

width:100%;

margin-top:30px;

padding:16px;

border:none;

background:#25D366;

color:#fff;

font-size:18px;

border-radius:10px;

cursor:pointer;

transition:.3s;

}

#sendWhatsapp:hover{

background:#1faa57;

}

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

@media screen and (max-width:768px){

    .header{

        padding:0 5%;

    }

    #menu-btn{

        display:block;
        font-size:28px;
        cursor:pointer;
        color:var(--brown);
        z-index:1001;

    }

    .navbar{

        position:fixed;

        top:90px;
        right:-100%;

        width:280px;
        height:calc(100vh - 90px);

        background:#fff;

        display:flex;
        flex-direction:column;
        align-items:center;

        gap:30px;

        padding-top:50px;

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

        transition:.4s ease;

        z-index:999;

    }

    .navbar.active{

        right:0;

    }

    .navbar a{

        font-size:20px;

    }

}

#menu-btn{

    transition:.3s;

}

#menu-btn:hover{

    color:var(--gold);

    transform:rotate(90deg);

}

@media screen and (max-width:768px){

    .hero{

        grid-template-columns:1fr;
        text-align:center;
        padding-top:130px;

    }

    .hero-text{

        padding-right:0;

    }

    .hero-text h1{

        font-size:42px;

    }

    .hero-buttons{

        justify-content:center;
        flex-wrap:wrap;

    }

    .hero-image{

        justify-content:center;

    }

    .hero-image img{

        max-width:100%;

    }

}