/*
==========================================================
PVAGOLD Marketplace
Premium Dark Gold Theme
Version : 1.0
==========================================================
*/

/*=========================================================
1. VARIABLES
=========================================================*/

:root{

--primary:#D4AF37;
--primary-hover:#F4C542;

--black:#0F0F10;
--dark:#18181B;
--card:#242428;

--border:#34343A;

--white:#FFFFFF;
--gray:#BDBDBD;

--success:#22C55E;
--danger:#EF4444;

--radius:16px;

--transition:.30s ease;

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

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

}

/*=========================================================
2. RESET
=========================================================*/

*{

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

}

html{

scroll-behavior:smooth;

}

body{

background:var(--black);

color:var(--white);

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

overflow-x:hidden;

font-size:15px;

line-height:1.7;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

transition:var(--transition);

}

ul{

list-style:none;

padding:0;

margin:0;

}

.container-xl{

max-width:1400px;

}

/*=========================================================
3. COMMON BUTTONS
=========================================================*/

.btn-gold{

background:var(--primary);

color:#000;

border:none;

font-weight:700;

padding:13px 28px;

border-radius:50px;

transition:.3s;

}

.btn-gold:hover{

background:var(--primary-hover);

transform:translateY(-2px);

box-shadow:var(--gold-shadow);

color:#000;

}

.btn-outline-gold{

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

color:var(--primary);

background:transparent;

padding:13px 28px;

border-radius:50px;

font-weight:700;

}

.btn-outline-gold:hover{

background:var(--primary);

color:#000;

}

/*=========================================================
4. SECTION TITLE
=========================================================*/

.section-badge{

display:inline-block;

padding:8px 18px;

background:#2a2413;

color:var(--primary);

border-radius:50px;

margin-bottom:15px;

font-weight:600;

}

.section-title{

font-size:42px;

font-weight:800;

margin-bottom:15px;

}

.section-description{

color:var(--gray);

font-size:17px;

max-width:650px;

}

/*=========================================================
5. CARD
=========================================================*/

.dashboard-card,

.feature-card,

.review-box,

.news-card,

.benefit-card{

background:var(--card);

border:1px solid var(--border);

border-radius:var(--radius);

padding:25px;

transition:.3s;

}

.dashboard-card:hover,

.feature-card:hover,

.review-box:hover,

.news-card:hover,

.benefit-card:hover{

transform:translateY(-6px);

border-color:var(--primary);

box-shadow:var(--gold-shadow);

}
/*=========================================================
6. NAVBAR
=========================================================*/

.navbar{

background:rgba(15,15,16,.95);

backdrop-filter:blur(18px);

border-bottom:1px solid var(--border);

padding:14px 0;

position:sticky;

top:0;

z-index:9999;

transition:.35s;

}

.navbar.scrolled{

background:#0F0F10;

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

}

.navbar-brand{

font-size:32px;

font-weight:800;

letter-spacing:.5px;

color:#fff!important;

}

.text-gold{

color:var(--primary)!important;

}

.navbar-nav{

align-items:center;

gap:6px;

}

.navbar .nav-link{

color:#fff!important;

font-weight:600;

padding:12px 18px!important;

border-radius:10px;

transition:.3s;

}

.navbar .nav-link:hover{

color:var(--primary)!important;

background:rgba(212,175,55,.08);

}

.navbar .nav-link.active{

background:rgba(212,175,55,.12);

color:var(--primary)!important;

}

.navbar-toggler{

border:none;

box-shadow:none!important;

}

.navbar-toggler:focus{

box-shadow:none;

}

.search-box{

width:520px;

position:relative;

}

.search-box input{

height:54px;

border-radius:50px;

background:#1C1C1F;

border:1px solid var(--border);

color:#fff;

padding-left:22px;

padding-right:60px;

}

.search-box input:focus{

background:#1C1C1F;

border-color:var(--primary);

color:#fff;

box-shadow:none;

}

.search-box input::placeholder{

color:#888;

}

.search-box button{

position:absolute;

right:5px;

top:5px;

height:44px;

width:44px;

border:none;

border-radius:50%;

background:var(--primary);

color:#000;

font-size:18px;

}

.search-box button:hover{

background:var(--primary-hover);

}

.nav-icon{

position:relative;

margin-left:8px;

width:44px;

height:44px;

display:flex;

align-items:center;

justify-content:center;

background:#202024;

border:1px solid var(--border);

border-radius:50%;

color:#fff;

font-size:18px;

transition:.3s;

}

.nav-icon:hover{

background:var(--primary);

color:#000;

border-color:var(--primary);

}

.nav-badge{

position:absolute;

top:-5px;

right:-5px;

min-width:20px;

height:20px;

background:#EF4444;

color:#fff;

font-size:11px;

font-weight:700;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

}

.user-menu{

display:flex;

align-items:center;

gap:10px;

margin-left:20px;

}

.user-avatar{

width:42px;

height:42px;

border-radius:50%;

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

object-fit:cover;

}

.dropdown-menu{

background:var(--card);

border:1px solid var(--border);

border-radius:14px;

padding:10px;

min-width:240px;

box-shadow:var(--shadow);

margin-top:15px;

}

.dropdown-item{

color:#fff;

padding:12px 16px;

border-radius:10px;

transition:.3s;

}

.dropdown-item:hover{

background:rgba(212,175,55,.12);

color:var(--primary);

}

.dropdown-divider{

border-color:var(--border);

}

.mega-menu{

padding:30px;

width:900px;

background:var(--card);

border-radius:18px;

border:1px solid var(--border);

box-shadow:var(--shadow);

}

.mega-menu h6{

color:var(--primary);

margin-bottom:18px;

font-weight:700;

}

.mega-menu a{

display:block;

padding:8px 0;

color:#ddd;

}

.mega-menu a:hover{

color:var(--primary);

padding-left:6px;

}

.announcement-bar{

background:linear-gradient(90deg,#D4AF37,#F4C542);

color:#000;

font-weight:700;

font-size:14px;

padding:10px 0;

text-align:center;

}

.announcement-bar a{

color:#000;

font-weight:800;

text-decoration:underline;

}
/*=========================================================
7. HERO
=========================================================*/

.hero-section{

position:relative;

padding:90px 0;

background:
radial-gradient(circle at top right,rgba(212,175,55,.10),transparent 35%),
radial-gradient(circle at bottom left,rgba(212,175,55,.06),transparent 40%),
#0F0F10;

overflow:hidden;

}

.hero-section::before{

content:"";

position:absolute;

width:600px;

height:600px;

right:-220px;

top:-220px;

border-radius:50%;

background:rgba(212,175,55,.05);

filter:blur(80px);

}

.hero-content{

position:relative;

z-index:2;

}

.hero-badge{

display:inline-block;

padding:10px 18px;

background:rgba(212,175,55,.10);

border:1px solid rgba(212,175,55,.25);

color:var(--primary);

border-radius:50px;

font-weight:700;

margin-bottom:25px;

}

.hero-content h1{

font-size:64px;

font-weight:800;

line-height:1.15;

margin-bottom:25px;

}

.hero-content p{

font-size:18px;

color:var(--gray);

max-width:620px;

margin-bottom:35px;

line-height:1.8;

}

.hero-buttons{

display:flex;

gap:18px;

margin-bottom:40px;

flex-wrap:wrap;

}

.hero-search{

max-width:650px;

margin-bottom:45px;

}

.hero-search .input-group{

background:#1B1B1D;

border:1px solid var(--border);

border-radius:60px;

overflow:hidden;

padding:8px;

}

.hero-search input{

background:transparent;

border:none;

color:#fff;

height:54px;

padding-left:18px;

}

.hero-search input:focus{

background:transparent;

box-shadow:none;

color:#fff;

}

.hero-search input::placeholder{

color:#888;

}

.hero-search button{

width:60px;

border-radius:50px;

}

.hero-stats{

display:grid;

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

gap:25px;

margin-top:25px;

}

.hero-stats div{

background:var(--card);

border:1px solid var(--border);

border-radius:16px;

padding:25px;

text-align:center;

transition:.3s;

}

.hero-stats div:hover{

border-color:var(--primary);

transform:translateY(-5px);

box-shadow:var(--gold-shadow);

}

.hero-stats h3{

font-size:32px;

font-weight:800;

color:var(--primary);

margin-bottom:10px;

}

.hero-stats span{

color:#C5C5C5;

font-size:14px;

}

.hero-right{

position:relative;

display:flex;

justify-content:center;

align-items:center;

min-height:650px;

}

.hero-right img{

max-width:95%;

position:relative;

z-index:2;

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

}

.hero-glow{

position:absolute;

width:420px;

height:420px;

background:rgba(212,175,55,.15);

border-radius:50%;

filter:blur(70px);

z-index:1;

}

.floating-card{

position:absolute;

background:rgba(36,36,40,.95);

border:1px solid var(--border);

border-radius:18px;

padding:18px 22px;

display:flex;

align-items:center;

gap:15px;

box-shadow:var(--shadow);

z-index:3;

animation:floatCard 4s ease-in-out infinite;

}

.floating-card .icon{

width:55px;

height:55px;

border-radius:50%;

background:rgba(212,175,55,.15);

display:flex;

align-items:center;

justify-content:center;

color:var(--primary);

font-size:24px;

}

.floating-card strong{

display:block;

font-size:16px;

}

.floating-card small{

color:#AFAFAF;

}

.floating-card:first-child{

left:-20px;

top:110px;

}

.floating-card.second{

right:-20px;

bottom:120px;

animation-delay:1.5s;

}

@keyframes floatImage{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

@keyframes floatCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

/*=========================================================
8. CATEGORY
=========================================================*/

.categories-section{

padding:90px 0;

background:#141416;

position:relative;

}

.category-box{

display:block;

background:var(--card);

border:1px solid var(--border);

border-radius:20px;

padding:35px 20px;

text-align:center;

transition:.35s;

height:100%;

position:relative;

overflow:hidden;

}

.category-box::before{

content:"";

position:absolute;

width:180px;

height:180px;

background:rgba(212,175,55,.06);

border-radius:50%;

top:-90px;

right:-90px;

transition:.4s;

}

.category-box:hover{

transform:translateY(-10px);

border-color:var(--primary);

box-shadow:var(--gold-shadow);

}

.category-box:hover::before{

transform:scale(1.3);

}

.category-icon{

width:90px;

height:90px;

margin:auto;

margin-bottom:22px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#1D1D20;

border:2px solid rgba(212,175,55,.15);

transition:.35s;

}

.category-box:hover .category-icon{

background:rgba(212,175,55,.10);

border-color:var(--primary);

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

}

.category-icon img{

width:46px;

height:46px;

object-fit:contain;

}

.category-box h5{

font-size:19px;

font-weight:700;

color:#fff;

margin-bottom:10px;

}

.category-box p{

margin:0;

color:#9F9F9F;

font-size:14px;

}

.category-box:hover h5{

color:var(--primary);

}

.category-count{

display:inline-flex;

align-items:center;

justify-content:center;

padding:6px 12px;

margin-top:12px;

border-radius:30px;

background:#1F1F22;

color:var(--primary);

font-size:13px;

font-weight:600;

}

.category-box:hover .category-count{

background:var(--primary);

color:#000;

}

/*=========================================================
9. PRODUCT CARD
=========================================================*/

.product-card{

position:relative;

background:var(--card);

border:1px solid var(--border);

border-radius:20px;

overflow:hidden;

transition:.35s;

height:100%;

display:flex;

flex-direction:column;

}

.product-card:hover{

transform:translateY(-8px);

border-color:var(--primary);

box-shadow:var(--gold-shadow);

}

.product-image{

position:relative;

height:240px;

overflow:hidden;

background:#1B1B1E;

}

.product-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

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

transform:scale(1.08);

}

.product-badge{

position:absolute;

top:15px;

left:15px;

background:var(--primary);

color:#000;

padding:6px 12px;

border-radius:30px;

font-size:12px;

font-weight:700;

z-index:5;

}

.product-official{

background:#16a34a;

color:#fff;

}

.product-featured{

background:#2563eb;

color:#fff;

}

.product-discount{

background:#dc2626;

color:#fff;

}

.product-actions{

position:absolute;

top:15px;

right:15px;

display:flex;

flex-direction:column;

gap:10px;

opacity:0;

transform:translateX(20px);

transition:.3s;

z-index:10;

}

.product-card:hover .product-actions{

opacity:1;

transform:translateX(0);

}

.product-actions a{

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

background:rgba(15,15,16,.9);

border:1px solid var(--border);

border-radius:50%;

color:#fff;

transition:.3s;

}

.product-actions a:hover{

background:var(--primary);

color:#000;

}

.product-content{

padding:22px;

flex:1;

display:flex;

flex-direction:column;

}

.product-category{

font-size:13px;

color:var(--primary);

margin-bottom:10px;

font-weight:600;

}

.product-title{

font-size:19px;

font-weight:700;

line-height:1.4;

margin-bottom:12px;

color:#fff;

min-height:55px;

}

.product-title a{

color:#fff;

}

.product-title a:hover{

color:var(--primary);

}

.product-meta{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:15px;

font-size:14px;

color:#BDBDBD;

}

.product-rating{

color:#FBBF24;

font-size:14px;

}

.product-stock{

color:#22C55E;

font-weight:600;

}

.product-price{

display:flex;

align-items:center;

gap:10px;

margin-top:auto;

margin-bottom:20px;

}

.product-price .price{

font-size:28px;

font-weight:800;

color:var(--primary);

}

.product-price .old-price{

font-size:15px;

color:#888;

text-decoration:line-through;

}

.product-footer{

display:flex;

gap:10px;

}

.product-footer .btn{

flex:1;

border-radius:12px;

padding:12px;

font-weight:700;

}

.product-footer .btn i{

margin-right:6px;

}

/*=========================================================
10. OFFICIAL SHOP
=========================================================*/

.official-shop-section{

padding:100px 0;

background:#111113;

position:relative;

overflow:hidden;

}

.official-shop-section::before{

content:"";

position:absolute;

top:-250px;

right:-250px;

width:500px;

height:500px;

background:rgba(212,175,55,.05);

border-radius:50%;

filter:blur(80px);

}

.official-shop-section::after{

content:"";

position:absolute;

bottom:-250px;

left:-250px;

width:450px;

height:450px;

background:rgba(212,175,55,.04);

border-radius:50%;

filter:blur(90px);

}

.official-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:60px;

flex-wrap:wrap;

gap:20px;

position:relative;

z-index:2;

}

.official-title{

font-size:42px;

font-weight:800;

}

.official-title span{

color:var(--primary);

}

.official-subtitle{

color:var(--gray);

font-size:17px;

max-width:700px;

margin-top:12px;

}

.official-products{

position:relative;

z-index:2;

}

.official-ribbon{

position:absolute;

top:18px;

left:-45px;

width:170px;

padding:10px 0;

text-align:center;

background:linear-gradient(90deg,#D4AF37,#F4C542);

color:#000;

font-size:13px;

font-weight:800;

transform:rotate(-45deg);

z-index:50;

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

}

.official-card{

position:relative;

overflow:hidden;

}

.official-card::before{

content:"";

position:absolute;

inset:0;

border:2px solid rgba(212,175,55,.18);

border-radius:20px;

pointer-events:none;

transition:.35s;

}

.official-card:hover::before{

border-color:var(--primary);

}

.official-card:hover{

box-shadow:

0 0 35px rgba(212,175,55,.18),

0 20px 45px rgba(0,0,0,.45);

}

.official-badge{

display:inline-flex;

align-items:center;

gap:8px;

padding:8px 16px;

background:#1d2d1f;

color:#4ADE80;

font-size:13px;

font-weight:700;

border-radius:30px;

margin-bottom:15px;

}

.official-badge i{

font-size:15px;

}

.official-footer{

margin-top:70px;

position:relative;

z-index:2;

}

.official-benefits{

display:grid;

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

gap:25px;

}

.official-benefit{

background:#19191C;

border:1px solid var(--border);

border-radius:18px;

padding:30px;

text-align:center;

transition:.35s;

}

.official-benefit:hover{

transform:translateY(-8px);

border-color:var(--primary);

box-shadow:var(--gold-shadow);

}

.official-benefit i{

width:75px;

height:75px;

margin:auto;

margin-bottom:20px;

display:flex;

align-items:center;

justify-content:center;

background:rgba(212,175,55,.10);

border-radius:50%;

font-size:32px;

color:var(--primary);

}

.official-benefit h4{

font-size:20px;

margin-bottom:12px;

font-weight:700;

}

.official-benefit p{

margin:0;

color:#BDBDBD;

line-height:1.7;

}

/*=========================================================
11. SELLER CTA
=========================================================*/

/*=========================================================
12. STATISTICS
=========================================================*/

/*=========================================================
13. REVIEWS
=========================================================*/

/*=========================================================
14. TELEGRAM
=========================================================*/

/*=========================================================
15. FAQ
=========================================================*/

/*=========================================================
16. FOOTER
=========================================================*/

/*=========================================================
17. MARKETPLACE
=========================================================*/

/*=========================================================
18. PRODUCT PAGE
=========================================================*/

/*=========================================================
19. DASHBOARDS
=========================================================*/

/*=========================================================
20. RESPONSIVE
=========================================================*/
/* ===========================
   HERO SECTION
=========================== */

.hero-section{
    background:#0f1115;
    padding:90px 0;
    overflow:hidden;
}

.hero-image{
    max-width:580px;
    width:100%;
    height:auto;
    display:block;
    margin:0 auto;
    filter:drop-shadow(0 25px 60px rgba(255,193,7,.35));
    transition:.4s ease;
}

.hero-image:hover{
    transform:translateY(-8px) scale(1.02);
}

.text-warning{
    color:#FFC107!important;
}

.btn-warning{
    background:#FFC107;
    border:none;
}

.btn-warning:hover{
    background:#ffb300;
}

.btn-outline-warning:hover{
    background:#FFC107;
    color:#111;
}
.category-card{
    background:#171a20;
    border:1px solid #2a2d34;
    border-radius:16px;
    padding:30px;
    transition:.3s;
    text-align:center;
}

.category-card i{
    font-size:42px;
    color:#FFC107;
    margin-bottom:20px;
}

.category-card:hover{
    transform:translateY(-8px);
    border-color:#FFC107;
    box-shadow:0 15px 40px rgba(255,193,7,.18);
}
/* ===========================
   Featured Products
=========================== */

.featured-products{
    background:#0f1115;
}

.product-card{

    background:#181d24;

    border:1px solid #292f39;

    border-radius:18px;

    padding:25px;

    transition:.35s;

    position:relative;

    height:100%;
}

.product-card:hover{

    transform:translateY(-8px);

    border-color:#FFC107;

    box-shadow:0 20px 50px rgba(255,193,7,.18);

}

.product-badge{

    position:absolute;

    top:15px;

    right:15px;

    background:#FFC107;

    color:#111;

    padding:5px 12px;

    border-radius:50px;

    font-size:12px;

    font-weight:700;

}

.product-icon{

    width:80px;

    height:80px;

    margin:20px auto;

    background:#FFC107;

    color:#111;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

}

.product-icon i{

    font-size:36px;

}
/* ===========================
   Official Shop
=========================== */

.official-shop{
    background:#11151d;
}

.official-card{

    background:#181c24;

    border:2px solid rgba(255,193,7,.20);

    border-radius:20px;

    padding:30px 20px;

    transition:.35s;

    height:100%;

    position:relative;

}

.official-card:hover{

    transform:translateY(-10px);

    border-color:#FFC107;

    box-shadow:0 20px 60px rgba(255,193,7,.20);

}

.official-badge{

    position:absolute;

    top:15px;

    left:15px;

    background:#FFC107;

    color:#111;

    padding:6px 12px;

    border-radius:50px;

    font-size:12px;

    font-weight:700;

}

.official-icon{

    width:90px;

    height:90px;

    margin:35px auto 25px;

    border-radius:50%;

    background:#FFC107;

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

}

.official-icon i{

    font-size:42px;

}
/* ===========================
   Become Seller
=========================== */

.seller-section{

    background:#0f1115;

}

.seller-box{

    background:#181d24;

    border:1px solid rgba(255,193,7,.20);

    border-radius:25px;

    padding:60px;

}

.seller-feature{

    background:#20252d;

    padding:16px 18px;

    border-radius:12px;

    color:#fff;

}

.seller-feature i{

    margin-right:10px;

    font-size:20px;

}

.seller-image{

    max-width:480px;

    width:100%;

}
/* Trending Products */

.trending-products{
    background:#0f1115;
}

.trend-card{

    background:#181d24;

    border:1px solid #2c313b;

    border-radius:18px;

    padding:25px;

    text-align:center;

    transition:.35s;

}

.trend-card:hover{

    transform:translateY(-8px);

    border-color:#FFC107;

    box-shadow:0 20px 45px rgba(255,193,7,.18);

}

.trend-icon{

    width:80px;

    height:80px;

    background:#FFC107;

    color:#111;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:20px auto;

}

.trend-icon i{

    font-size:36px;

}
/* ===========================
   Recent Products
=========================== */

.recent-products{
    background:#11151d;
}

.recent-card{

    background:#181d24;

    border:1px solid #2a2f38;

    border-radius:18px;

    padding:25px;

    position:relative;

    transition:.35s;

    text-align:center;

}

.recent-card:hover{

    transform:translateY(-8px);

    border-color:#FFC107;

    box-shadow:0 20px 45px rgba(255,193,7,.18);

}

.recent-badge{

    position:absolute;

    top:15px;

    right:15px;

    background:#28a745;

    color:#fff;

    padding:5px 12px;

    border-radius:50px;

    font-size:12px;

    font-weight:700;

}

.recent-icon{

    width:80px;

    height:80px;

    margin:20px auto;

    border-radius:50%;

    background:#FFC107;

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

}

.recent-icon i{

    font-size:36px;

}
/* ===========================
   Telegram Banner
=========================== */

.telegram-section{

    background:#0f1115;

}

.telegram-box{

    background:#181d24;

    border:1px solid rgba(255,193,7,.20);

    border-radius:25px;

    padding:60px;

}

.telegram-item{

    color:#ddd;

    margin-bottom:12px;

    font-size:16px;

}

.telegram-item i{

    margin-right:10px;

}

.telegram-image{

    max-width:350px;

    width:100%;

}
/* FAQ */

.faq-section{
    background:#11151d;
}

.accordion-item{
    background:#181d24;
    border:1px solid #2d323d;
    margin-bottom:15px;
    border-radius:15px!important;
    overflow:hidden;
}

.accordion-button{
    background:#181d24;
    color:#fff;
    font-weight:600;
}

.accordion-button:not(.collapsed){
    background:#FFC107;
    color:#111;
}

.accordion-button:focus{
    box-shadow:none;
}

.accordion-body{
    background:#181d24;
    color:#ccc;
}
/* ===================================
   PREMIUM FOOTER
=================================== */

.footer-section{

    background:#0b0d11;

    padding:80px 0 30px;

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

}

.footer-links{

    padding:0;

    margin:0;

    list-style:none;

}

.footer-links li{

    margin-bottom:12px;

}

.footer-links a{

    color:#9ca3af;

    text-decoration:none;

    transition:.3s;

}

.footer-links a:hover{

    color:#FFC107;

    padding-left:8px;

}

.social-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#181d24;

    color:#FFC107;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    transition:.3s;

}

.social-icon:hover{

    background:#FFC107;

    color:#111;

    transform:translateY(-4px);

}

.footer-divider{

    border-color:#2d323d;

    margin:50px 0 30px;

}
/* ===============================
   Official Hero
=============================== */

.official-hero{
    background:#0f1115;
    padding:90px 0;
    overflow:hidden;
}

.official-title{

    font-size:58px;

    font-weight:800;

    color:#fff;

    line-height:1.2;

}

.official-title span{

    color:#FFC107;

}

.official-subtitle{

    color:#b7b7b7;

    font-size:18px;

    line-height:1.8;

    margin:25px 0;

}

.official-list{

    list-style:none;

    padding:0;

    margin:35px 0;

}

.official-list li{

    color:#ddd;

    margin-bottom:15px;

    font-size:17px;

}

.official-list i{

    color:#FFC107;

    margin-right:12px;

}

.official-image{

    max-width:650px;

    width:100%;

    display:block;

    margin:auto;

}
/*==============================
Official Search
==============================*/

.official-search{

    background:#181d24;

    padding:40px;

    border-radius:20px;

    border:1px solid rgba(255,193,7,.15);

    margin-top:-50px;

    position:relative;

    z-index:10;

}

.official-search .form-control,
.official-search .form-select{

    background:#11151d;

    border:1px solid #2d323d;

    color:#fff;

    height:52px;

}

.official-search .form-control:focus,
.official-search .form-select:focus{

    border-color:#FFC107;

    box-shadow:none;

}
/*==============================
OFFICIAL CATEGORIES
==============================*/

.official-categories{

background:#11151d;

}

.official-category-card{

display:block;

background:#181d24;

border:1px solid #2d323d;

border-radius:18px;

padding:35px 20px;

text-align:center;

transition:.35s;

height:100%;

}

.official-category-card:hover{

border-color:#FFC107;

transform:translateY(-8px);

box-shadow:0 20px 50px rgba(255,193,7,.18);

}

.official-category-icon{

width:80px;

height:80px;

background:#FFC107;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin:auto auto 20px;

}

.official-category-icon i{

font-size:36px;

color:#111;

}

.official-category-card h5{

color:#fff;

margin-bottom:10px;

}

.official-category-card p{

color:#999;

margin:0;

}
/*==================================
OFFICIAL PRODUCTS
==================================*/

.official-products{

background:#0f1115;

}

.official-product-card{

background:#181d24;

border:1px solid #2d323d;

border-radius:20px;

padding:25px;

position:relative;

transition:.35s;

height:100%;

overflow:hidden;

}

.official-product-card:hover{

transform:translateY(-10px);

border-color:#FFC107;

box-shadow:0 20px 60px rgba(255,193,7,.18);

}

.featured-badge{

position:absolute;

top:15px;

left:15px;

background:#FFC107;

color:#111;

padding:5px 12px;

border-radius:30px;

font-size:12px;

font-weight:700;

}

.official-badge{

position:absolute;

top:15px;

right:15px;

background:#111;

border:1px solid #FFC107;

color:#FFC107;

padding:5px 10px;

border-radius:30px;

font-size:12px;

}

.delivery-badge{

margin-top:40px;

display:inline-block;

padding:5px 12px;

border-radius:30px;

font-size:12px;

font-weight:600;

}

.instant{

background:#198754;

color:#fff;

}

.manual{

background:#fd7e14;

color:#fff;

}

.product-image{

width:90px;

height:90px;

margin:30px auto;

background:#FFC107;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

}

.product-image i{

font-size:42px;

color:#111;

}

.official-product-card h5{

color:#fff;

text-align:center;

min-height:52px;

margin-bottom:15px;

}

.rating{

text-align:center;

color:#FFC107;

margin-bottom:10px;

}

.rating span{

color:#999;

}

.stock{

text-align:center;

color:#28a745;

margin-bottom:15px;

}

.official-product-card h3{

text-align:center;

color:#FFC107;

font-weight:800;

}
/*==================================
OFFICIAL PAGINATION
==================================*/

.official-pagination{

background:#11151d;

}

.pagination .page-link{

background:#181d24;

border:1px solid #2d323d;

color:#FFC107;

margin:0 5px;

width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

border-radius:10px;

}

.pagination .page-item.active .page-link{

background:#FFC107;

color:#111;

border-color:#FFC107;

}

.pagination .page-link:hover{

background:#FFC107;

color:#111;

border-color:#FFC107;

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

.product-gallery{

background:#181d24;

padding:25px;

border-radius:20px;

border:1px solid #2d323d;

}

.main-product-image{

background:#11151d;

padding:40px;

border-radius:15px;

text-align:center;

}

.main-product-image img{

max-height:420px;

object-fit:contain;

}

.thumb-image{

background:#11151d;

padding:10px;

border-radius:10px;

border:1px solid #2d323d;

cursor:pointer;

transition:.3s;

}

.thumb-image:hover{

border-color:#FFC107;

}

.thumb-image img{

height:70px;

width:100%;

object-fit:contain;

}
/*==================================
PRODUCT INFO
==================================*/

.product-info{

background:#181d24;

padding:35px;

border-radius:20px;

border:1px solid #2d323d;

height:100%;

}

.product-title{

font-size:34px;

font-weight:800;

color:#fff;

margin-bottom:15px;

}

.product-price{

font-size:42px;

font-weight:800;

color:#FFC107;

margin:20px 0;

}

.product-rating{

color:#FFC107;

font-size:18px;

}

.product-stock{

font-size:16px;

color:#ddd;

margin-bottom:20px;

}

.product-table{

color:#ddd;

}

.product-table th{

width:180px;

color:#fff;

}

.product-table td{

color:#bbb;

}

.quantity-box input{

height:55px;

background:#11151d;

border:1px solid #2d323d;

color:#fff;

}

.quantity-box input:focus{

border-color:#FFC107;

box-shadow:none;

background:#11151d;

color:#fff;

}
/*==================================
PRODUCT DESCRIPTION
==================================*/

.product-details{

background:#11151d;

}

.product-details .nav-link{

background:#181d24;

color:#bbb;

margin-right:10px;

border-radius:12px;

padding:12px 22px;

border:1px solid #2d323d;

}

.product-details .nav-link.active{

background:#FFC107;

color:#111;

font-weight:700;

}

.product-tab-box{

background:#181d24;

border:1px solid #2d323d;

border-radius:20px;

padding:35px;

color:#ddd;

}

.product-tab-box h3{

color:#fff;

margin-bottom:20px;

}

.product-tab-box ul{

padding-left:20px;

}

.product-tab-box li{

margin-bottom:12px;

}

.product-tab-box table{

margin-bottom:0;

}

.product-tab-box th{

width:220px;

color:#fff;

}

.product-tab-box td{

color:#bbb;

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

.related-products{

background:#0f1115;

}

.related-card{

background:#181d24;

border:1px solid #2d323d;

border-radius:20px;

padding:25px;

position:relative;

transition:.35s;

height:100%;

}

.related-card:hover{

transform:translateY(-10px);

border-color:#FFC107;

box-shadow:0 20px 60px rgba(255,193,7,.18);

}

.related-icon{

width:90px;

height:90px;

background:#FFC107;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin:50px auto 25px;

}

.related-icon i{

font-size:40px;

color:#111;

}

.related-card h5{

color:#fff;

text-align:center;

min-height:55px;

}

.related-card h3{

text-align:center;

color:#FFC107;

font-weight:800;

margin-top:15px;

}
/*=========================
CART
=========================*/

.cart-page{

background:#0f1115;

min-height:600px;

}

.cart-item{

background:#181d24;

border:1px solid #2d323d;

border-radius:20px;

padding:25px;

margin-bottom:25px;

}

.cart-icon{

width:80px;

height:80px;

background:#FFC107;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin:auto;

}

.cart-icon i{

font-size:36px;

color:#111;

}
/*==================================
CART SUMMARY
==================================*/

.cart-summary{

background:#181d24;

border:1px solid #2d323d;

border-radius:20px;

padding:30px;

position:sticky;

top:100px;

}

.summary-row,
.summary-total{

display:flex;

justify-content:space-between;

margin-bottom:18px;

color:#ddd;

}

.summary-total{

font-size:24px;

font-weight:700;

color:#FFC107;

}

.cart-summary hr{

border-color:#2d323d;

}

.cart-summary .form-control{

height:50px;

background:#11151d;

border:1px solid #2d323d;

color:#fff;

}

.cart-summary .form-control:focus{

background:#11151d;

border-color:#FFC107;

box-shadow:none;

color:#fff;

}

.cart-info p{

color:#bbb;

font-size:14px;

margin-bottom:12px;

}
/*==================================
CHECKOUT
==================================*/

.checkout-page{

background:#0f1115;

min-height:700px;

}

.checkout-box{

background:#181d24;

padding:35px;

border-radius:20px;

border:1px solid #2d323d;

margin-bottom:30px;

}

.checkout-heading{

color:#fff;

font-weight:700;

margin-bottom:30px;

}

.checkout-box label{

color:#ddd;

font-weight:600;

margin-bottom:8px;

}

.checkout-box .form-control,
.checkout-box .form-select{

height:55px;

background:#11151d;

border:1px solid #2d323d;

color:#fff;

}

.checkout-box textarea.form-control{

height:auto;

}

.checkout-box .form-control:focus,
.checkout-box .form-select:focus{

background:#11151d;

border-color:#FFC107;

color:#fff;

box-shadow:none;

}
/*==================================
PAYMENT METHODS
==================================*/

.payment-card{

display:block;

cursor:pointer;

}

.payment-card input{

display:none;

}

.payment-content{

display:flex;

align-items:center;

gap:18px;

background:#11151d;

border:2px solid #2d323d;

padding:20px;

border-radius:15px;

transition:.3s;

}

.payment-card input:checked + .payment-content{

border-color:#FFC107;

box-shadow:0 0 20px rgba(255,193,7,.2);

}

.payment-icon{

width:65px;

height:65px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:28px;

}

.payment-content h5{

color:#fff;

margin-bottom:6px;

}

.payment-content p{

color:#aaa;

margin:0;

font-size:14px;

}
/*==================================
ORDER REVIEW
==================================*/

.checkout-table{

color:#ddd;

margin-bottom:0;

}

.checkout-table thead{

background:#11151d;

}

.checkout-table th{

color:#fff;

border-color:#2d323d;

}

.checkout-table td{

vertical-align:middle;

border-color:#2d323d;

}

.review-product-icon{

width:60px;

height:60px;

background:#FFC107;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

}

.review-product-icon i{

font-size:28px;

color:#111;

}
/*==================================
CHECKOUT SUMMARY
==================================*/

.checkout-summary{

background:#181d24;

border:1px solid #2d323d;

border-radius:20px;

padding:30px;

position:sticky;

top:100px;

}

.summary-item,
.summary-total{

display:flex;

justify-content:space-between;

margin-bottom:18px;

color:#ddd;

}

.summary-total{

font-size:24px;

font-weight:700;

color:#FFC107;

}

.checkout-summary hr{

border-color:#2d323d;

}

.checkout-summary .form-control{

height:50px;

background:#11151d;

border:1px solid #2d323d;

color:#fff;

}

.checkout-summary .form-control:focus{

background:#11151d;

border-color:#FFC107;

box-shadow:none;

color:#fff;

}

.checkout-security div{

margin-bottom:12px;

color:#bbb;

}

.checkout-security i{

margin-right:10px;

}
/*==================================
ADMIN PANEL
==================================*/

.admin-sidebar{

position:fixed;

left:0;

top:0;

width:260px;

height:100vh;

background:#181d24;

padding:30px;

border-right:1px solid #2d323d;

}

.admin-sidebar h3{

color:#fff;

margin-bottom:40px;

}

.admin-sidebar ul{

list-style:none;

padding:0;

}

.admin-sidebar li{

margin-bottom:18px;

}

.admin-sidebar a{

color:#bbb;

text-decoration:none;

display:block;

padding:12px 15px;

border-radius:10px;

transition:.3s;

}

.admin-sidebar a:hover{

background:#FFC107;

color:#111;

}

.admin-content{

margin-left:260px;

padding:40px;

}

.admin-title{

color:#fff;

font-weight:700;

}

.admin-card{

background:#181d24;

border:1px solid #2d323d;

border-radius:18px;

padding:30px;

text-align:center;

}

.admin-card h5{

color:#bbb;

}

.admin-card h2{

color:#FFC107;

font-size:36px;

margin-top:10px;

}
/*==================================
ADMIN PRODUCTS
==================================*/

.admin-table{

background:#181d24;

border-radius:20px;

padding:25px;

border:1px solid #2d323d;

overflow:auto;

}

.admin-table table{

color:#ddd;

margin:0;

}

.admin-table thead{

background:#11151d;

}

.admin-table th{

color:#fff;

border-color:#2d323d;

}

.admin-table td{

border-color:#2d323d;

vertical-align:middle;

}

.admin-product-image{

width:60px;

height:60px;

object-fit:cover;

border-radius:10px;

border:1px solid #333;

}
/*==================================
ADMIN PRODUCT FORM
==================================*/

.admin-form{

background:#181d24;

padding:35px;

border-radius:20px;

border:1px solid #2d323d;

}

.section-title{

color:#FFC107;

margin-bottom:25px;

font-weight:700;

}

.admin-form label{

color:#ddd;

margin-bottom:8px;

font-weight:600;

}

.admin-form .form-control,
.admin-form .form-select{

background:#11151d;

border:1px solid #2d323d;

color:#fff;

height:52px;

}

.admin-form textarea.form-control{

height:auto;

}

.admin-form .form-control:focus,
.admin-form .form-select:focus{

background:#11151d;

border-color:#FFC107;

color:#fff;

box-shadow:none;

}

.admin-form hr{

border-color:#2d323d;

margin:40px 0;

}

.form-check{

margin-bottom:15px;

}

.form-check-label{

color:#ddd;

}
/*==================================
ADMIN ORDERS
==================================*/

.admin-table{

background:#181d24;

padding:25px;

border-radius:20px;

border:1px solid #2d323d;

overflow:auto;

}

.admin-table table{

margin:0;

color:#ddd;

}

.admin-table thead{

background:#11151d;

}

.admin-table th{

color:#fff;

border-color:#2d323d;

}

.admin-table td{

border-color:#2d323d;

}
/*==================================
BUYER PANEL
==================================*/

.buyer-sidebar{

position:fixed;

left:0;

top:0;

width:260px;

height:100vh;

background:#181d24;

padding:30px;

border-right:1px solid #2d323d;

}

.buyer-sidebar h3{

color:#fff;

margin-bottom:40px;

}

.buyer-sidebar ul{

list-style:none;

padding:0;

}

.buyer-sidebar li{

margin-bottom:15px;

}

.buyer-sidebar a{

display:block;

padding:12px 15px;

border-radius:10px;

text-decoration:none;

color:#bbb;

transition:.3s;

}

.buyer-sidebar a:hover{

background:#FFC107;

color:#111;

}

.buyer-content{

margin-left:260px;

padding:40px;

}

.buyer-title{

color:#fff;

font-weight:700;

}

.buyer-card{

background:#181d24;

border:1px solid #2d323d;

border-radius:18px;

padding:30px;

text-align:center;

}

.buyer-card h5{

color:#aaa;

}

.buyer-card h2{

color:#FFC107;

font-size:36px;

margin-top:10px;

}
/*==================================
LOGIN PAGE
==================================*/

.login-page{

min-height:100vh;

display:flex;

align-items:center;

background:#0f1115;

padding:80px 0;

}

.login-card{

background:#181d24;

padding:40px;

border-radius:20px;

border:1px solid #2d323d;

}

.login-card h2{

color:#fff;

font-weight:700;

}

.login-card label{

color:#ddd;

margin-bottom:8px;

}

.login-card .form-control{

height:55px;

background:#11151d;

border:1px solid #2d323d;

color:#fff;

}

.login-card .form-control:focus{

background:#11151d;

border-color:#FFC107;

color:#fff;

box-shadow:none;

}