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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

body{

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

    background:#f7f7f7;

    color:#222;

}

a{

    text-decoration:none;

    color:inherit;

}

/*========================
TOP BAR
========================*/

.top-bar{

    background:#222;

    color:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 70px;

    font-size:14px;

}

.top-left{

    display:flex;

    gap:30px;

}

.top-left span,
.top-right span{

    display:flex;

    align-items:center;

    gap:8px;

}

/*========================
HEADER
========================*/

.header{

    background:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 70px;

    position:sticky;

    top:0;

    z-index:999;

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

}

.logo a{

    font-size:34px;

    font-weight:700;

}

.logo span{

    color:#A97142;

}

.search-box{

    width:520px;

    height:48px;

    display:flex;

    border:2px solid #A97142;

    border-radius:40px;

    overflow:hidden;

}

.search-box input{

    flex:1;

    border:none;

    outline:none;

    padding:0 20px;

    font-size:15px;

}

.search-box button{

    width:60px;

    border:none;

    background:#A97142;

    color:#fff;

    cursor:pointer;

    font-size:18px;

}

.header-icons{

    display:flex;

    gap:28px;

}

.header-icons a{

    position:relative;

    font-size:23px;

    transition:.3s;

}

.header-icons a:hover{

    color:#A97142;

}

.cart span{

    position:absolute;

    top:-8px;

    right:-10px;

    width:20px;

    height:20px;

    background:#A97142;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:11px;

}


/*==================================
            NAVIGATION
===================================*/

.navbar{

    width:100%;

    background:#ffffff;

    border-top:1px solid #ececec;

    border-bottom:1px solid #ececec;

    position:sticky;

    top:90px;

    z-index:998;

}

.nav-menu{

    width:90%;

    max-width:1400px;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    list-style:none;

}

.nav-menu li{

    position:relative;

}

.nav-menu li a{

    display:block;

    padding:18px 25px;

    font-size:15px;

    font-weight:500;

    color:#333;

    transition:.3s;

}

.nav-menu li a:hover{

    color:#A97142;

}

.sale{

    color:#d62828 !important;

    font-weight:700;

}

.nav-menu li::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:8px;

    width:0;

    height:2px;

    background:#A97142;

    transition:.3s;

    transform:translateX(-50%);

}

.nav-menu li:hover::after{

    width:70%;

}


/*==========================
FULL WIDTH MEGA MENU
==========================*/

.mega-parent{
    position:relative;
}

.mega-menu{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    top:100%;

    width:1050px;

    background:#fff;

    display:flex;

    justify-content:space-between;

    gap:40px;

    padding:40px;

    border-radius:15px;

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

    opacity:0;

    visibility:hidden;

    transition:.35s;

    margin-top:20px;

    z-index:999;

}

.mega-parent:hover .mega-menu{

    opacity:1;

    visibility:visible;

    margin-top:0;

}

.mega-column{

    width:180px;

}

.mega-column h4{

    color:#A97142;

    margin-bottom:15px;

    font-size:18px;

}

.mega-column a{

    display:block;

    padding:8px 0;

    color:#555;

    transition:.3s;

}

.mega-column a:hover{

    color:#A97142;

    padding-left:8px;

}

.mega-banner{

    width:320px;

    position:relative;

}

.mega-banner img{

    width:100%;

    height:300px;

    object-fit:cover;

    border-radius:12px;

}

.banner-content{

    position:absolute;

    bottom:20px;

    left:20px;

    color:white;

}

.banner-content h3{

    font-size:28px;

}

.banner-content p{

    margin:10px 0;

}

.banner-content button{

    border:none;

    background:#A97142;

    color:#fff;

    padding:10px 25px;

    border-radius:30px;

    cursor:pointer;

    transition:.3s;

}

.banner-content button:hover{

    background:#222;

}


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

.menu-toggle{

    display:none;

    font-size:28px;

    cursor:pointer;

}

/* Tablet */

@media(max-width:992px){

.header{

    padding:15px 30px;

}

.search-box{

    width:300px;

}

.nav-menu{

    gap:5px;

}

.nav-menu li a{

    padding:15px;

}

}

/* Mobile */

@media(max-width:768px){

.top-bar{

    display:none;

}

.header{

    padding:15px 20px;

}

.search-box{

    display:none;

}

.header-icons{

    display:none;

}

.menu-toggle{

    display:block;

}

.navbar{

    position:fixed;

    left:-100%;

    top:80px;

    width:280px;

    height:100vh;

    background:#fff;

    transition:.4s;

    overflow-y:auto;

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

}

.navbar.active{

    left:0;

}

.nav-menu{

    flex-direction:column;

    align-items:flex-start;

    width:100%;

}

.nav-menu li{

    width:100%;

}

.nav-menu li a{

    width:100%;

    padding:18px 25px;

    border-bottom:1px solid #eee;

}

.mega-menu{

    position:static;

    width:100%;

    display:none;

    opacity:1;

    visibility:visible;

    transform:none;

    box-shadow:none;

    padding:20px;

    margin:0;

    flex-direction:column;

}

.mega-parent.active .mega-menu{

    display:flex;

}

.mega-banner{

    display:none;

}

}


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

.hero{

    width:100%;

}

.slider{

    position:relative;

    width:100%;

    height:650px;

    overflow:hidden;

}

.slide{

    position:absolute;

    width:100%;

    height:100%;

    opacity:0;

    transition:1s;

}

.slide.active{

    opacity:1;

}

.slide img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero-content{

    position:absolute;

    top:50%;

    left:10%;

    transform:translateY(-50%);

    color:white;

    max-width:550px;

}

.hero-content h4{

    font-size:22px;

    margin-bottom:15px;

    color:#f8d7a4;

}

.hero-content h1{

    font-size:60px;

    margin-bottom:20px;

    line-height:1.2;

}

.hero-content p{

    font-size:18px;

    margin-bottom:30px;

}

.hero-btn{

    display:inline-block;

    background:#A97142;

    color:#fff;

    padding:15px 40px;

    border-radius:50px;

    font-size:17px;

    transition:.3s;

}

.hero-btn:hover{

    background:#222;

}

.prev,
.next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:55px;

    height:55px;

    border:none;

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

    font-size:25px;

    cursor:pointer;

    border-radius:50%;

}

.prev{

    left:30px;

}

.next{

    right:30px;

}

.prev:hover,
.next:hover{

    background:#A97142;

    color:white;

}


/*==========================
      SHOP BY CATEGORY
==========================*/

.category{

    padding:80px 8%;

    background:#fff;

}

.section-title{

    text-align:center;

    margin-bottom:50px;

}

.section-title h2{

    font-size:42px;

    color:#222;

}

.section-title p{

    margin-top:10px;

    color:#777;

}

.category-container{

    display:grid;

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

    gap:30px;

}

.category-card{

    position:relative;

    overflow:hidden;

    border-radius:15px;

    cursor:pointer;

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

    transition:.4s;

}

.category-card img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:.5s;

}

.category-card:hover img{

    transform:scale(1.08);

}

.category-info{

    position:absolute;

    bottom:25px;

    left:25px;

    color:#fff;

}

.category-info h3{

    font-size:28px;

    margin-bottom:12px;

}

.category-info a{

    display:inline-block;

    padding:10px 24px;

    background:#A97142;

    border-radius:30px;

    color:#fff;

    transition:.3s;

}

.category-info a:hover{

    background:#222;

}

.category-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top,rgba(0,0,0,.65),transparent);

    z-index:1;

}

.category-info{

    z-index:2;

}

@media(max-width:992px){

.category-container{

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

}

}

@media(max-width:768px){

.category-container{

    grid-template-columns:1fr;

}

.section-title h2{

    font-size:32px;

}

}


/*==========================
    FEATURED PRODUCTS
===========================*/

.products{

    padding:80px 8%;

    background:#f8f8f8;

}

.product-grid{

    display:grid;

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

    gap:30px;

}

.product-card{

    background:#fff;

    border-radius:15px;

    overflow:hidden;

    position:relative;

    transition:.4s;

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

    display:flex;

    flex-direction:column;

}

.product-card:hover{

    transform:translateY(-10px);

}

.product-card img{

    width:100%;

    height:260px;

    object-fit:cover;

}

.badge{

    position:absolute;

    top:15px;

    left:15px;

    background:#A97142;

    color:#fff;

    padding:6px 12px;

    border-radius:20px;

    font-size:13px;

    font-weight:600;

}

.wishlist{

    position:absolute;

    top:18px;

    right:18px;

    background:#fff;

    width:40px;

    height:40px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

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

}

.product-info{

    padding:20px;

    display:flex;

    flex-direction:column;

    flex:1;

}

.product-info h3{

    font-size:20px;

    margin-bottom:12px;

    min-height:56px;

}

.stars{

    color:#ffb400;

    margin-bottom:12px;

}

.price{

    font-size:24px;

    color:#A97142;

    font-weight:700;

}

.price span{

    color:#999;

    text-decoration:line-through;

    font-size:16px;

    margin-left:10px;

}

.product-info button{

    width:100%;

    margin-top:auto;

    padding:14px;

    border:none;

    background:#222;

    color:#fff;

    border-radius:40px;

    cursor:pointer;

    transition:.3s;

    font-size:16px;

}

.product-info button:hover{

    background:#A97142;

}

@media(max-width:1200px){

.product-grid{

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

}

}

@media(max-width:768px){

.product-grid{

    grid-template-columns:1fr;

}

}


/*==========================
      SPECIAL OFFERS
==========================*/

.offers{

    width:90%;

    margin:80px auto;

    display:grid;

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

    gap:30px;

}

.offer-box{

    position:relative;

    height:400px;

    overflow:hidden;

    border-radius:18px;

    cursor:pointer;

}

.offer-box img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.offer-box:hover img{

    transform:scale(1.08);

}

.offer-box::before{

    content:"";

    position:absolute;

    inset:0;

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

}

.offer-content{

    position:absolute;

    top:50%;

    left:50px;

    transform:translateY(-50%);

    color:#fff;

    z-index:2;

    max-width:350px;

}

.offer-content span{

    display:inline-block;

    background:#A97142;

    padding:8px 18px;

    border-radius:30px;

    margin-bottom:20px;

    font-size:14px;

    letter-spacing:1px;

}

.offer-content h2{

    font-size:38px;

    line-height:1.2;

    margin-bottom:20px;

}

.offer-content p{

    font-size:18px;

    margin-bottom:25px;

}

.offer-btn{

    display:inline-block;

    background:#fff;

    color:#222;

    padding:14px 35px;

    border-radius:40px;

    font-weight:600;

    transition:.3s;

}

.offer-btn:hover{

    background:#A97142;

    color:#fff;

}

/* Responsive */

@media(max-width:992px){

.offers{

    grid-template-columns:1fr;

}

.offer-box{

    height:320px;

}

}

@media(max-width:768px){

.offer-content{

    left:25px;

}

.offer-content h2{

    font-size:28px;

}

.offer-content p{

    font-size:16px;

}

}


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

.best-sellers{

    padding:80px 8%;

    background:#fff;

}

.best-grid{

    display:grid;

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

    gap:30px;

}

.best-card{

    background:#fff;

    border-radius:15px;

    overflow:hidden;

    position:relative;

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

    transition:.4s;

}

.best-card:hover{

    transform:translateY(-10px);

}

.best-card img{

    width:100%;

    height:260px;

    object-fit:cover;

}

.discount{

    position:absolute;

    top:15px;

    left:15px;

    background:#A97142;

    color:#fff;

    padding:6px 14px;

    border-radius:20px;

    font-size:13px;

}

.best-icons{

    position:absolute;

    top:15px;

    right:15px;

    display:flex;

    flex-direction:column;

    gap:10px;

}

.best-icons i{

    width:38px;

    height:38px;

    background:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.3s;

}

.best-icons i:hover{

    background:#A97142;

    color:#fff;

}

.best-info{

    padding:20px;

}

.best-info h3{

    min-height:55px;

}

.rating{

    color:#f6b400;

    margin:10px 0;

}

.best-info h4{

    color:#A97142;

    font-size:24px;

}

.best-info h4 span{

    color:#999;

    text-decoration:line-through;

    font-size:16px;

}

.best-info button{

    width:100%;

    margin-top:20px;

    padding:14px;

    border:none;

    background:#222;

    color:#fff;

    border-radius:35px;

    cursor:pointer;

    transition:.3s;

}

.best-info button:hover{

    background:#A97142;

}

@media(max-width:1200px){

.best-grid{

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

}

}

@media(max-width:768px){

.best-grid{

grid-template-columns:1fr;

}

}