/* Google Fonts */
@import url("https://fonts.googleapis.com/css?family=Varela+Round&display=swap");
@import url("https://fonts.googleapis.com/css?family=Noto+Serif:wght@400;700&display=swap");

@font-face {
  font-family: "TrashHand";
  src: url("../fonts/TrashHand.ttf");
}
/*-------------------------------------------------------------------*/
/* === Keyframes === */
/*======================
1.0. General
========================*/

a, body, div, h2, h3, h4, html, i, img, p, span{
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
}

html{
  overflow-x: hidden;
}
body {
  font-family: 'Varela Round', sans-serif;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.8;
  font-weight: 400;
  color: #000000;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  height: auto;
}

/*======================
1.1. Typography
========================*/
h2,
h3,
h4 {
  margin: 0 0 20px;
  ##font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-weight: 700;
  line-height: 1.2;
  color: #222;
}
h2 {
  font-size: 42px;
}
h3 {
  font-size: 22px;
margin-top: 60px;
}
h4 {
  font-size: 28px;
  line-height: 1.4;
}
p {
  line-height: 1.8;
  margin-bottom: 15px;
  color: #000000;
}
a {
  color: #ff0005;
  text-decoration: none;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}
a:hover,
a:focus {
  color: #bc0004;
  text-decoration: none;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  outline: none;
}

/*======================
1.2 Section Spacings
========================*/
.section {
  position: relative;
  padding: 80px 0;
}
.section.section-padding{
  padding: 80px 0 50px;
}
/*=============================
1.6 Modal, Popups & Dropdowns
==============================*/
.modal-header .close:not(:disabled):not(.disabled):hover{
  background-color: #dd3333;
  opacity: 1;
}

/* 2.2. Header Style 3 */
/*======================
3. Footer
========================*/

/* Dark Footer */

/*======================
5. Subheader
========================*/

/*======================
6. Components
========================*/

/* 6.1. Blog Posts */

/* 6.1.2. Blog Post Details */

/* 6.12. Newsletter Popup */
.metro_newsletter-popup-modal .modal-header .close:not(:disabled):not(.disabled):hover{
  background-color: transparent;
}

/* 6.13. Recipe Cards */

@media (max-width: 991px) {
  .section {
    padding: 40px 0;
  }
  .section.section-padding{
    padding: 50px 0 20px;
  }

}

@media (max-width: 768px){

  body{
    font-size: 14px;
  }
  h2{
    font-size: 30px;
  }
  h3{
    font-size: 26px;
  }
  h4{
    font-size: 22px;
  }


}

/* ================================
   GLOBAL
================================ */

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
}

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

/* ================================
   DESKTOP NAV (Improved Look)
================================ */

/* Subtle default look */

/* Hover effect */

/* Active page */

/* Remove underline animation (cleaner now) */
/* ================================
   DROPDOWN
================================ */

/* Show dropdown on hover */

/* ================================
   MOBILE TOGGLE
================================ */

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

/* ================================
   OVERLAY
================================ */

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    display: none;
    z-index: 998;
}

/* ================================
   SEARCH SECTION
================================ */

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

/* ===== FIX DROPDOWN LAYOUT ===== */



/* ================================
   SEARCH SECTION PREMIUM
================================ */

/* Search Box */

/* Responsive */
body{
font-family:'Inter',Arial,sans-serif;
}

/* recipe cards */

.related-card{
background:#fff;
border-radius:2px;
overflow:hidden;
transition:all .25s ease;
height:100%;
display:flex;
flex-direction:column;
}

.related-card:hover{
transform:translateY(-4px);
box-shadow:0 8px 22px rgba(0,0,0,.08);
}

.related-thumb img{
width:100%;
height:180px;
object-fit:cover;
display:block;
}

.related-body{
padding:14px 16px 16px 16px;
}

.related-title{
font-size:15px;
font-weight:600;
line-height:1.35;
margin-bottom:8px;
}

.related-title a{
color:#222;
text-decoration:none;
}

.related-title a:hover{
color:#e63946;
}

.related-meta{
display:flex;
justify-content:space-between;
align-items:center;
font-size:13px;
color:#777;
}

.rating-stars{
color:#ffb400;
font-size:13px;
letter-spacing:1px;
}

.time-meta{
font-size:12px;
color:#888;
}

.home-heading{
margin:30px 0 25px 0;
font-size:28px;
font-weight:700;
}
/* =============================
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-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:310px;
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:330px;
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;
}
/* BASE (shared everywhere) */
.save-btn{
    width:36px;
    height:36px;
    border-radius:50%;
    border:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.2s ease;
    font-size:16px;
}

/* DEFAULT STYLE (normal inline usage) */

/* OVERLAY STYLE (image corner) */
.save-btn.overlay{
    position:absolute;
    top:10px;
    right:10px;
left:auto; 
    background:rgba(255,255,255,0.9);
    z-index:10;
}

.save-btn.overlay:hover{
    background:#fff;
    transform:scale(1.1);
}

/* ICON COLORS */
.save-btn i{
    color:#ef4444;
}

/* ACTIVE STATE */

/* FOCUS REMOVE */
.save-btn:focus,
.save-btn:active,
.save-btn:focus-visible{
    outline:none;
    box-shadow:none;
}
/* =========================
   RIGHT GRID - BIG CLEAN STYLE
========================= */

.hero-right{
padding-left:28px;
}

/* REMOVE CARD LOOK */
.hero-card{
background:none;
box-shadow:none;
border-radius:0;
overflow:visible;
height:auto;
}

/* IMAGE BIG + CLEAN */
.hero-card img{
width:100%;
height:200px;   /* 🔥 bigger */
object-fit:cover;
display:block;
border-radius:8px;
}

/* BODY */
.hero-card-body{
padding:10px 2px 0;
}

/* BIG TITLE (THIS WAS YOUR MAIN ISSUE) */
.hero-card h4{
font-size:18px;   /* 🔥 MUCH bigger */
font-weight:800;
margin:8px 0 6px;
line-height:1.4;
color:#111;
}

/* META */
.hero-card-time{
font-size:14px;
color:#555;
}

/* TITLE */
.side-section-title{
font-size:22px;
font-weight:900;
margin-bottom:18px;
}
/* META ROW (RATING + TIME INLINE) */
.hero-card-meta{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
color:#555;
flex-wrap:wrap;
}

/* STARS */
.meta-stars{
color:#f59e0b;
font-size:14px;
letter-spacing:1px;
}

/* REVIEWS */
.meta-reviews{
color:#888;
font-size:13px;
}

/* TIME */
.meta-time{
display:flex;
align-items:center;
gap:5px;
}