/* =====================================
 SMART MARKET PREMIUM UI
 FINAL CLEAN VERSION
===================================== */


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


body{

font-family:'Segoe UI',Arial,sans-serif;

background:#f7f8fc;

color:#1f2937;

}


a{

text-decoration:none;

color:inherit;

}


img{

max-width:100%;

display:block;

}



.container{

width:92%;

max-width:1280px;

margin:auto;

}



/* HEADER */

.main-header{

background:#ffffff;

padding:18px 0;

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

}



.header-flex{

display:flex;

align-items:center;

justify-content:space-between;

gap:25px;

}



.logo a{

font-size:32px;

font-weight:800;

color:#111827;

}



.logo span{

color:#2563eb;

}



/* SEARCH */


.search-box{

flex:1;

max-width:650px;

display:flex;

background:#f8fafc;

border:1px solid #e5e7eb;

border-radius:50px;

overflow:hidden;

}



.search-box input{

flex:1;

padding:15px 22px;

border:none;

outline:none;

background:transparent;

font-size:15px;

}



.search-box button{

width:65px;

border:none;

background:#2563eb;

color:#fff;

font-size:20px;

}





/* ACTION BUTTON */

.header-actions{

display:flex;

gap:10px;

}



.header-actions a{

padding:10px 15px;

background:#fff;

border:1px solid #e5e7eb;

border-radius:15px;

font-size:14px;

font-weight:600;

transition:.3s;

}



.header-actions a:hover{

color:#2563eb;

box-shadow:
0 10px 25px rgba(37,99,235,.18);

transform:translateY(-2px);

}



/* NAVIGATION */


.premium-nav{

background:#fff;

border-top:1px solid #eee;

}



.nav-flex{

display:flex;

gap:12px;

padding:12px 0;

}



.nav-item{

padding:11px 22px;

border-radius:30px;

font-weight:600;

transition:.3s;

}



.nav-item:hover,
.nav-item.active{

background:#2563eb;

color:white;

box-shadow:
0 8px 25px rgba(37,99,235,.25);

}





/* HERO */


.hero-slider{

width:92%;

max-width:1280px;

height:420px;

margin:30px auto;

border-radius:28px;

overflow:hidden;

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

}



.slide{

height:100%;

display:none;

align-items:center;

padding:60px;

background:
linear-gradient(135deg,#2563eb,#111827);

color:white;

}



.slide.active{

display:flex;

}



.slide h1{

font-size:48px;

font-weight:800;

}



.slide p{

font-size:18px;

margin:15px 0;

}



/* SERVICE */


.service-strip{

width:92%;

max-width:1280px;

margin:35px auto;

display:grid;

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

gap:20px;

}



.service-strip div{

background:#fff;

padding:22px;

border-radius:22px;

text-align:center;

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

}



.service-strip strong{

display:block;

font-size:18px;

margin:8px;

}
/* =========================
 CATEGORY SECTION
========================= */


.section-title{

width:92%;

max-width:1280px;

margin:40px auto 20px;

display:flex;

justify-content:space-between;

align-items:center;

}



.section-title h2{

font-size:28px;

font-weight:800;

}



.category-grid{

width:92%;

max-width:1280px;

margin:auto;

display:grid;

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

gap:20px;

}



.category-card{

background:#fff;

padding:30px 10px;

text-align:center;

border-radius:24px;

font-size:16px;

font-weight:700;

box-shadow:

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

transition:.3s;

}



.category-card:hover{

transform:translateY(-8px);

box-shadow:

0 20px 45px rgba(37,99,235,.20);

}





/* =========================
 PRODUCT MARKETPLACE
========================= */


.market-section{

width:92%;

max-width:1280px;

margin:50px auto;

}



.market-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}



.market-header h2{

font-size:28px;

font-weight:800;

}



.market-header a{

color:#2563eb;

font-weight:700;

}




.product-grid{

display:grid;

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

gap:22px;

}




.product-card{

background:#fff;

padding:18px;

border-radius:25px;

position:relative;

box-shadow:

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

transition:.3s;

overflow:hidden;

}



.product-card:hover{

transform:translateY(-8px);

box-shadow:

0 25px 50px rgba(37,99,235,.20);

}



.product-card img{

width:100%;

height:230px;

object-fit:cover;

border-radius:18px;

background:#f3f4f6;

}



.discount{

position:absolute;

top:25px;

left:25px;

background:#ef4444;

color:#fff;

padding:6px 12px;

border-radius:20px;

font-size:13px;

font-weight:700;

}



.product-card h3{

margin:15px 0 8px;

font-size:17px;

}



.rating{

font-size:14px;

}



.price{

display:flex;

gap:12px;

align-items:center;

margin:12px 0;

}



.price del{

color:#9ca3af;

}



.price strong{

font-size:22px;

color:#2563eb;

}



.product-card button{

width:100%;

padding:13px;

border:none;

border-radius:16px;

background:#2563eb;

color:white;

font-size:15px;

font-weight:700;

cursor:pointer;

transition:.3s;

}



.product-card button:hover{

background:#1d4ed8;

}





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


.footer{

background:#111827;

color:#fff;

padding:40px 0;

margin-top:50px;

}



.footer-container{

width:92%;

max-width:1280px;

margin:auto;

display:grid;

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

gap:30px;

}





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


@media(max-width:992px){


.header-flex{

flex-wrap:wrap;

}


.category-grid{

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

}


.product-grid{

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

}


}




@media(max-width:768px){


.container{

width:94%;

}



.header-flex{

flex-direction:column;

}



.logo a{

font-size:28px;

}



.search-box{

width:100%;

}



.header-actions{

width:100%;

justify-content:center;

}



.header-actions a{

font-size:12px;

padding:8px 10px;

}



.nav-flex{

overflow-x:auto;

justify-content:flex-start;

}



.nav-item{

white-space:nowrap;

font-size:13px;

}



.hero-slider{

height:280px;

}



.slide{

padding:30px;

}



.slide h1{

font-size:30px;

}



.service-strip{

grid-template-columns:1fr;

}



.category-grid{

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

gap:12px;

}



.category-card{

padding:20px 5px;

font-size:14px;

}



.product-grid{

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

gap:12px;

}



.product-card{

padding:12px;

}



.product-card img{

height:160px;

}



.footer-container{

grid-template-columns:1fr;

}


}




@media(max-width:420px){


.category-grid{

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

}



.product-grid{

grid-template-columns:1fr;

}



}
/* ==============================
 CURRENT BLADE FIX
============================== */


/* HEADER FIX */

.top-header{

background:#fff;

padding:18px 0;

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

}


.header-container{

display:flex;

align-items:center;

justify-content:space-between;

gap:25px;

}



.main-nav{

background:#fff;

border-top:1px solid #eee;

}



.nav-container{

display:flex;

gap:12px;

padding:12px 0;

}





/* HERO FIX */


.hero-slider{

width:92%;

max-width:1280px;

height:420px;

margin:30px auto;

border-radius:28px;

overflow:hidden;

box-shadow:

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

}



.hero-slide{

height:100%;

display:none;

align-items:center;

padding:60px;

background:

linear-gradient(135deg,#2563eb,#111827);

color:white;

}



.hero-slide.active{

display:flex;

}



.hero-content h1{

font-size:48px;

font-weight:800;

line-height:1.2;

}



.hero-content p{

font-size:18px;

margin:20px 0;

}



.hero-btn{

display:inline-block;

padding:14px 30px;

background:white;

color:#2563eb;

border-radius:30px;

font-weight:700;

}




/* HEADER MOBILE FIX */


@media(max-width:768px){


.header-container{

flex-direction:column;

}


.header-actions{

width:100%;

justify-content:center;

}


.nav-container{

overflow-x:auto;

}


.hero-slider{

height:280px;

}



.hero-content h1{

font-size:30px;

}



}
/* =========================
 PREMIUM HEADER UPGRADE
========================= */


.site-header{

background:#fff;

position:relative;

z-index:10;

}



.top-header{

padding:18px 0;

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

}



.header-container{

display:flex;

align-items:center;

gap:25px;

}



.logo a{

font-size:34px;

font-weight:900;

letter-spacing:-1px;

}



.logo span{

color:#2563eb;

}




.search-box{

flex:1;

height:52px;

display:flex;

background:#f8fafc;

border:1px solid #e5e7eb;

border-radius:18px;

overflow:hidden;

box-shadow:
inset 0 1px 5px rgba(0,0,0,.05);

}



.search-box input{

flex:1;

border:0;

outline:0;

padding:0 22px;

font-size:15px;

background:transparent;

}



.search-box button{

width:70px;

border:0;

background:#2563eb;

color:#fff;

font-size:20px;

cursor:pointer;

}





.header-actions{

display:flex;

gap:12px;

}



.header-actions a{

display:flex;

align-items:center;

gap:8px;

padding:10px 15px;

border-radius:16px;

border:1px solid #e5e7eb;

background:#fff;

font-weight:700;

font-size:14px;

transition:.3s;

}



.header-actions span{

font-size:20px;

}



.header-actions small{

display:block;

font-size:11px;

font-weight:500;

color:#6b7280;

}



.header-actions a:hover{

border-color:#2563eb;

box-shadow:
0 10px 25px rgba(37,99,235,.15);

transform:translateY(-2px);

}





/* NAV */


.main-nav{

background:#ffffff;

border-top:1px solid #f1f5f9;

}



.nav-container{

display:flex;

gap:10px;

padding:12px 0;

}



.nav-item{

padding:10px 20px;

border-radius:30px;

font-size:14px;

font-weight:700;

transition:.3s;

}



.nav-item:hover,
.nav-item.active{

background:#2563eb;

color:#fff;

box-shadow:
0 8px 20px rgba(37,99,235,.25);

}





@media(max-width:768px){


.header-container{

flex-direction:column;

}



.search-box{

width:100%;

}



.header-actions{

width:100%;

justify-content:center;

}



.header-actions a{

padding:8px;

font-size:12px;

}



.nav-container{

overflow-x:auto;

}



}
/* =========================
 PREMIUM HERO
========================= */


.hero-slider{

width:92%;

max-width:1280px;

height:430px;

margin:35px auto;

border-radius:32px;

overflow:hidden;

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

}



.hero-slide{

height:100%;

display:none;

align-items:center;

justify-content:space-between;

padding:70px;

background:
linear-gradient(135deg,#2563eb,#111827);

color:white;

}



.hero-slide.active{

display:flex;

}



.hero-content{

max-width:550px;

}



.hero-tag{

display:inline-block;

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

padding:8px 18px;

border-radius:30px;

font-size:14px;

margin-bottom:20px;

}



.hero-content h1{

font-size:52px;

line-height:1.1;

font-weight:900;

}



.hero-content p{

font-size:18px;

margin:20px 0 30px;

color:#e5e7eb;

}



.hero-btn{

display:inline-block;

background:white;

color:#2563eb;

padding:15px 35px;

border-radius:40px;

font-weight:800;

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

}



.hero-image{

display:flex;

align-items:center;

justify-content:center;

position:relative;

}



.product-show{

width:230px;

height:230px;

border-radius:50%;

background:white;

display:flex;

align-items:center;

justify-content:center;

font-size:90px;

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

}



.floating-card{

position:absolute;

top:-20px;

right:0;

background:white;

color:#111;

padding:15px 25px;

border-radius:20px;

font-weight:700;

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

}




@media(max-width:768px){


.hero-slider{

height:auto;

}



.hero-slide{

flex-direction:column;

padding:40px 25px;

text-align:center;

}



.hero-content h1{

font-size:34px;

}



.product-show{

width:150px;

height:150px;

font-size:60px;

margin-top:30px;

}


}
/* =========================
 HERO IMAGE BANNER
========================= */


.hero-slide{

position:relative;

}



.hero-banner-image{

width:45%;

height:100%;

display:flex;

align-items:center;

justify-content:center;

}



.hero-banner-image img{

width:100%;

height:320px;

object-fit:cover;

border-radius:28px;

box-shadow:

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

}



@media(max-width:768px){


.hero-banner-image{

width:100%;

margin-top:30px;

}



.hero-banner-image img{

height:200px;

}



}
/* =========================
 MARKET PRODUCT UI
========================= */


.market-section{

width:92%;

max-width:1280px;

margin:50px auto;

}



.market-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}



.market-header h2{

font-size:30px;

font-weight:800;

}



.market-header a{

color:#2563eb;

font-weight:700;

}



.product-grid{

display:grid;

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

gap:22px;

}



.product-card{

background:#fff;

padding:18px;

border-radius:24px;

position:relative;

box-shadow:

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

transition:.3s;

}



.product-card:hover{

transform:translateY(-8px);

box-shadow:

0 20px 45px rgba(37,99,235,.18);

}



.product-card img{

width:100%;

height:220px;

object-fit:cover;

border-radius:18px;

}



.discount{

position:absolute;

top:25px;

left:25px;

background:#ef4444;

color:white;

padding:6px 12px;

border-radius:20px;

font-size:13px;

font-weight:bold;

}



.product-card h3{

margin:15px 0 8px;

font-size:17px;

}



.rating{

font-size:14px;

}



.price{

display:flex;

gap:12px;

align-items:center;

margin:12px 0;

}



.price strong{

color:#2563eb;

font-size:22px;

}



.product-card button{

width:100%;

padding:13px;

border:none;

border-radius:16px;

background:#2563eb;

color:white;

font-weight:700;

}



@media(max-width:768px){

.product-grid{

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

}

}



@media(max-width:450px){

.product-grid{

grid-template-columns:1fr;

}

}
/* =========================
 BANGLA SERVICE STRIP PREMIUM
========================= */


.service-strip{

width:92%;

max-width:1280px;

margin:30px auto;

display:grid;

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

gap:18px;

}



.service-card{


display:flex;

align-items:center;

gap:15px;

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

border:1px solid #e5e7eb;

border-radius:20px;

padding:18px 22px;


box-shadow:

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


transition:.3s;


}



.service-card:hover{


transform:translateY(-5px);


border-color:#2563eb;


box-shadow:

0 15px 35px rgba(37,99,235,.15);


}



.service-icon{


width:50px;

height:50px;

display:flex;

align-items:center;

justify-content:center;

border-radius:16px;

background:#eff6ff;

font-size:25px;


}



.service-card h3{


font-size:16px;

margin-bottom:5px;

font-weight:800;


}



.service-card p{


font-size:13px;

color:#6b7280;

margin:0;


}




@media(max-width:768px){


.service-strip{

grid-template-columns:1fr;

}



}
/* =========================
 COMPACT GLOSSY SERVICE CARD
========================= */


.service-strip{

display:flex;

justify-content:center;

gap:12px;

margin:25px auto;

width:92%;

max-width:1280px;

}



.service-card{


display:flex;

align-items:center;

gap:10px;


padding:10px 16px;


border-radius:16px;


background:

linear-gradient(
145deg,
#ffffff,
#f3f7ff
);


border:1px solid rgba(37,99,235,.12);


box-shadow:

0 8px 20px rgba(0,0,0,.08),

inset 0 1px 3px rgba(255,255,255,.8);



transition:.3s;


}



.service-card:hover{


transform:translateY(-3px);


box-shadow:

0 15px 30px rgba(37,99,235,.18);


border-color:#2563eb;


}



.service-icon{


width:38px;

height:38px;


border-radius:12px;


display:flex;

align-items:center;

justify-content:center;


font-size:19px;


background:

linear-gradient(
135deg,
#eff6ff,
#dbeafe
);



box-shadow:

inset 0 2px 5px rgba(255,255,255,.8);


}



.service-card h3{


font-size:14px;

font-weight:800;

margin:0;

white-space:nowrap;


}



.service-card p{


font-size:12px;

color:#6b7280;

margin:2px 0 0;


white-space:nowrap;


}



@media(max-width:768px){


.service-strip{


flex-direction:column;

}



.service-card{


justify-content:flex-start;


}


}
/* =========================
 PREMIUM CATEGORY UI
========================= */


.category-section{

width:92%;

max-width:1280px;

margin:35px auto;

}



.category-section .section-title{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:18px;

}



.category-section h2{

font-size:26px;

font-weight:900;

}



.category-section a{

color:#2563eb;

font-weight:700;

}




.category-grid{

display:grid;

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

gap:16px;

}



.category-card{


background:

linear-gradient(
145deg,
#ffffff,
#f5f8ff
);


border-radius:22px;


padding:12px;


text-align:center;


border:1px solid rgba(37,99,235,.12);


box-shadow:

0 10px 25px rgba(0,0,0,.07);


transition:.35s;


}



.category-card:hover{


transform:translateY(-8px);


box-shadow:

0 20px 40px rgba(37,99,235,.18);


}



.category-card img{


width:100%;

height:120px;

object-fit:cover;

border-radius:16px;


}



.category-card h3{


font-size:15px;

margin-top:12px;

font-weight:800;


}




@media(max-width:900px){


.category-grid{

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

}


}



@media(max-width:600px){


.category-grid{

display:flex;

overflow-x:auto;

}


.category-card{

min-width:150px;

}


}