/* ==========================================
KARTBHARO HOMEPAGE SECTIONS

1. Text Marquee
2. Banner Area
3. Men Fashion Section
4. Women Fashion Section
5. Categories Grid
6. Future Homepage Blocks

========================================== */
/* ==========================================
TEXT MARQUEE
========================================== */
.kb-home-marquee{
margin:20px 20px 35px;
overflow:hidden;
position:relative;
border-radius:25px;
}
.kb-marquee-track{
display:flex;
gap:16px;
width:max-content;
animation:kbMarquee 40s linear infinite;
}
.kb-marquee-track a{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
height:66px;
padding:0 46px;
border-radius:16px;
background:
linear-gradient(
135deg,
#4a3027 0%,
#6d4c41 35%,
#d8b07a 50%,
#6d4c41 65%,
#4a3027 100%
);
border:1px solid rgba(255,255,255,.15);
box-shadow:
0 8px 25px rgba(47,29,23,.18);
color:#fff;
font-family:'Montserrat',sans-serif;
font-size:20px;
font-weight:700;
letter-spacing:1.5px;
text-transform:uppercase;
overflow:hidden;
}
/* animated shine effect */
.kb-marquee-track span::after{
content:'';
position:absolute;
top:0;
left:-150%;
width:100%;
height:100%;
background:
linear-gradient(
120deg,
transparent 30%,
rgba(255,255,255,.25) 50%,
transparent 70%
);
transform:skewX(-20deg);
animation:shine 3s infinite;
}
@keyframes shine{
0%{
left:-150%;
}
100%{
left:150%;
}
}
@keyframes kbMarquee{
0%{
transform:translateX(0);
}
100%{
transform:translateX(-50%);
}
}
.kb-home-marquee:hover .kb-marquee-track{
animation-play-state:paused;
}
.kb-marquee-track a{
text-decoration:none;
transition:.3s ease;
}
.kb-marquee-track a:hover{
transform:translateY(-3px);
box-shadow:
0 8px 25px rgba(0,0,0,.15);
color:#000;
}
/* ==========================================
BANNER SECTION
========================================== */

.kb-home-banner{
margin:20px!important;
}
.kb-home-banner img{
width:100%;
height:220px;
object-fit:cover;
border-radius:25px!important;
display:block;
}

/* ==========================================
MEN / WOMEN SECTION
========================================== */

.kb-ajio-fashion{
margin:18px 20px!important;
}

.kb-fashion-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
}

.kb-fashion-block{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
padding:20px;
border-radius:25px;
background:#d5e7f5;
box-shadow:
0 15px 40px rgba(0,0,0,.06);
}

.kb-big-card{
position:relative;
overflow:hidden;
border-radius:24px;
display:block;
}

.kb-big-card img{
width:100%;
height:350px;
object-fit:cover;
transition:.5s;
}

.kb-big-card:hover img{
transform:scale(1.08);
}

.kb-big-title{
position:absolute;
bottom:15px;
left:15px;
right:15px;
height:60px;
background:#fbd704;
border-radius:40px;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
font-weight:800;
color:#111;
}

.kb-small-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.kb-small-card{
position:relative;
overflow:hidden;
border-radius:22px;
display:block;
background:#fff;
}

.kb-small-card img{
width:100%;
height:130px;
object-fit:cover;
transition:.4s;
}

.kb-small-card:hover img{
transform:scale(1.08);
}

.kb-small-card span{
position:absolute;
left:10px;
right:10px;
bottom:10px;
height:42px;
background:#fff;
border-radius:30px;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
font-weight:700;
color:#111;
}




/* 404 'CODE /////////////' */
/* =====================================
404 PAGE
===================================== */

.kb-404{
min-height:80vh;
display:flex;
align-items:center;
justify-content:center;
padding:60px 20px;
background:#fafafa;
}

.kb-404-box{
max-width:700px;
width:100%;
text-align:center;
background:#fff;
padding:60px 40px;
border-radius:24px;
box-shadow:
0 15px 40px rgba(0,0,0,.08);
}

.kb-404-number{
display:block;
font-size:140px;
font-weight:900;
line-height:1;
margin-bottom:15px;
background:linear-gradient(
135deg,
#fbd704,
#ffcb05
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.kb-404-box h1{
font-size:42px;
font-weight:800;
margin-bottom:15px;
color:#2f1d17;
}

.kb-404-box p{
font-size:18px;
line-height:1.7;
color:#666;
margin-bottom:30px;
}

.kb-404-buttons{
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
}

.kb-404-btn{
height:52px;
padding:0 28px;
border-radius:14px;
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
font-weight:700;
transition:.3s;
}

.kb-404-btn.primary{
background:#2f1d17;
color:#fff;
}

.kb-404-btn.primary:hover{
transform:translateY(-2px);
}

.kb-404-btn.secondary{
background:#fbd704;
color:#111;
}

.kb-404-btn.secondary:hover{
transform:translateY(-2px);
}

/* MOBILE */

@media(max-width:767px){

.kb-404-box{
padding:40px 20px;
border-radius:20px;
}

.kb-404-number{
font-size:90px;
}

.kb-404-box h1{
font-size:28px;
}

.kb-404-box p{
font-size:15px;
}

.kb-404-buttons{
flex-direction:column;
}

.kb-404-btn{
width:100%;
}

}
.kb-single-wrapper{
width:100%;
margin:0;
padding:0;
}