/* =============================
HERO WRAPPER
============================= */

.hero-allrecipes{
max-width:1180px;
margin:40px auto 50px auto;
}

/* =============================
HERO IMAGE
============================= */

.hero-img{
width:100%;
height:470px;
object-fit:cover;
display:block;
margin-bottom:14px;
}

/* =============================
HERO TEXT
============================= */

.hero-text h2{
font-size:28px;
font-weight:700;
margin-bottom:8px;
line-height:1.3;
color:#222;
}

/* META LINE (stars + time) */

.hero-meta{
display:flex;
align-items:center;
gap:12px;
font-size:14px;
color:#777;
}

/* HERO STARS */

.hero-stars{
color:#f5b301;
font-size:22px;
letter-spacing:2px;
}

.hero-reviews{
font-size:13px;
color:#777;
}

.hero-time{
font-size:14px;
color:#777;
}


/* =============================
RIGHT COLUMN
============================= */

.hero-right{
display:flex;
flex-direction:column;
gap:18px;
}

/* SECTION TITLE */

.side-section-title{
font-size:22px;
font-weight:700;
margin-bottom:18px;
color:#222;
}

/* =============================
RIGHT LIST ITEM
============================= */

.side-recipe{
border-bottom:1px solid #eee;
padding-bottom:18px;
}

.side-recipe:last-child{
border-bottom:none;
}

.side-recipe a{
display:flex;
gap:16px;
text-decoration:none;
color:#222;
}

/* IMAGE */

.side-recipe img{
width:120px;
height:90px;
object-fit:cover;
flex-shrink:0;
}

/* TEXT AREA */

.side-text{
flex:1;
}

/* DISH LABEL */

.side-dish{
font-size:12px;
font-weight:600;
color:#888;
text-transform:uppercase;
letter-spacing:.4px;
margin-bottom:4px;
}

/* TITLE */

.side-text h4{
font-size:17px;
font-weight:600;
margin:0 0 6px;
line-height:1.35;
}

.side-text h4:hover{
color:#e63946;
}

/* META LINE */

.side-meta{
display:flex;
align-items:center;
gap:8px;
font-size:13px;
color:#777;
}

/* STARS */

.side-stars{
color:#f5b301;
font-size:16px;
letter-spacing:1px;
}

.side-reviews{
font-size:13px;
color:#777;
}

.side-time{
font-size:13px;
color:#777;
}


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

@media (max-width:992px){

.hero-img{
height:360px;
}

.hero-left{
margin-bottom:25px;
}

.side-recipe img{
width:100px;
height:75px;
}

.hero-stars{
font-size:20px;
}

}

@media (max-width:576px){

.hero-img{
height:240px;
}

.hero-text h2{
font-size:22px;
}

.side-text h4{
font-size:15px;
}

.side-stars{
font-size:15px;
}

}
.hero-intro{
font-size:16px;
color:#555;
line-height:1.6;
margin-top:10px;
max-width:90%;
}

.side-meta{
display:flex;
align-items:center;
gap:8px;
font-size:13px;
color:#777;
flex-wrap:wrap;
}

.side-rating{
color:#444;
font-weight:500;
}

.side-reviews{
color:#777;
}

.side-time{
color:#777;
}
.side-meta{
display:flex;
align-items:center;
gap:8px;
font-size:13px;
color:#777;
}

.side-stars{
color:#f5b301;
font-size:16px;
letter-spacing:1px;
}

.side-reviews{
font-size:13px;
color:#666;
}

.side-time{
font-size:13px;
color:#777;
}







/* =============================
TRENDING
============================= */

.trending-section{
margin-top:40px;
margin-bottom:40px;
}

.trending-title{
font-size:26px;
font-weight:700;
margin-bottom:25px;
}

.trend-card{
display:block;
text-decoration:none;
color:#222;
}

.trend-card img{
width:100%;
height:210px;
object-fit:cover;
border-radius:6px;
margin-bottom:10px;
transition:transform .3s;
}

.trend-card:hover img{
transform:scale(1.04);
}

.trend-body h3{
font-size:17px;
font-weight:600;
line-height:1.4;
margin-bottom:6px;
}

.trend-meta{
font-size:13px;
color:#777;
display:flex;
gap:8px;
align-items:center;
}

.trend-stars{
color:#f5b301;
}
.trending-section h3{
margin-top:10px;
}






/* =============================
BROWSE RECIPES
============================= */

.browse-section{
margin-top:60px;
margin-bottom:60px;
text-align:center;
}

.browse-title{
font-size:28px;
font-weight:700;
margin-bottom:35px;
}

.browse-card{
text-decoration:none;
display:block;
}

.browse-box{
width:150px;
height:150px;
margin:auto;
border-radius:50%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
color:#fff;
font-weight:600;
font-size:16px;
text-align:center;
transition:all .25s ease;
box-shadow:0 8px 22px rgba(0,0,0,0.12);
}

/* colorful gradients */

.browse-box.bg1{background:linear-gradient(135deg,#ff6b6b,#ff8e53);}
.browse-box.bg2{background:linear-gradient(135deg,#f7971e,#ffd200);}
.browse-box.bg3{background:linear-gradient(135deg,#56ab2f,#a8e063);}
.browse-box.bg4{background:linear-gradient(135deg,#36d1dc,#5b86e5);}
.browse-box.bg5{background:linear-gradient(135deg,#ff758c,#ff7eb3);}
.browse-box.bg6{background:linear-gradient(135deg,#8e2de2,#4a00e0);}
.browse-box.bg7{background:linear-gradient(135deg,#43cea2,#185a9d);}
.browse-box.bg8{background:linear-gradient(135deg,#f12711,#f5af19);}

.browse-box i{
font-size:34px;
margin-bottom:8px;
}

.browse-box span{
font-size:15px;
line-height:1.2;
}

/* hover effect */

.browse-box:hover{
transform:translateY(-6px) scale(1.05);
box-shadow:0 14px 30px rgba(0,0,0,0.18);
}


/* =============================
JUST FOR YOU
============================= */

.just-section{
margin-top:40px;
margin-bottom:40px;
}

.just-title{
font-size:26px;
font-weight:700;
margin-bottom:25px;
}

.just-card{
display:block;
text-decoration:none;
color:#222;
}

.just-card img{
width:100%;
height:260px;
object-fit:cover;
border-radius:6px;
margin-bottom:10px;
transition:transform .3s;
}

.just-card:hover img{
transform:scale(1.04);
}

.just-body h3{
font-size:18px;
font-weight:600;
line-height:1.4;
margin-bottom:6px;
}

.just-meta{
font-size:13px;
color:#777;
display:flex;
gap:8px;
align-items:center;
}

.just-stars{
color:#f5b301;
}
.just-section h3{
margin-top:10px;
}
.just-intro{
font-size:14px;
color:#666;
line-height:1.5;
margin-bottom:8px;
}