:root {
     --blue: #1e3d87;
     --blue2: #4C79D9;
     --text: #18181b;
     --muted: #64748b;
     --font: 'DM Sans', sans-serif;
     --hero-bg: #e8eeff;
 }

 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }
 html, body {
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

 body {
     font-family: var(--font);
     color: var(--text);
     background: #fff;
     overflow-x: hidden;
 }

 a {
     color: #fff;
     text-decoration: none;
 }

 /* ═══════════════════════════════
       NAVBAR — sits above hero, no overlap
    ═══════════════════════════════ */
 .site-nav {
     background: transparent;
     border-bottom: 1px solid #ebebeb;
     position: relative;
     z-index: 500;
 }

 .nav-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 13px 0;
     position: relative;
 }

 .nav-brand {
     font-size: 22px;
     font-weight: 800;
     color: var(--blue);
     text-decoration: none;
     letter-spacing: -.5px;
     flex-shrink: 0;
     z-index: 3;
 }

 /* centred pill */
 .nav-pill-center {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     z-index: 3;
 }

 .pill-wrap {
     background: linear-gradient(90deg, #1e3d87, #4C79D9);
     border-radius: 50px;
     padding: 5px;
     display: flex;
     align-items: center;
     gap: 2px;
     white-space: nowrap;
 }

 .plink {
     color: #fff;
     padding: 8px 20px;
     border-radius: 30px;
     font-size: 14px;
     font-weight: 500;
     text-decoration: none;
     display: flex;
     align-items: center;
     gap: 5px;
     cursor: pointer;
     transition: .18s;
     user-select: none;
 }

 .plink:hover,
 .plink.active {
     background: #fff;
     color: var(--blue);
 }

 .caret i {
     font-size: 16px;
     font-weight: 700 !important;
     color: #fff;
 }

 .plink:hover .caret i {
     color: var(--blue);
 }

 .plink .caret {
     font-size: 9px;
     opacity: .7;
 }

 .mega-col .drop-text {
     color: #fff !important;
     font-weight: 600;
 }

 /* right icons */
 .nav-right {
     display: flex;
     align-items: center;
     gap: 10px;
     flex-shrink: 0;
     z-index: 3;
 }

 .nav-icon {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     border: 1.5px solid #ddd;
     background: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     cursor: pointer;
     transition: .18s;
 }

 .nav-icon img {
     width: 20px;
     height: 20px;
 }

 .nav-icon:hover {
     background: transparent;
     border-color: var(--blue);
 }

 /* hamburger */
 .hamburger {
     display: none;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
     padding: 6px;
     z-index: 3;
 }

 .hamburger span {
     display: block;
     width: 22px;
     height: 2px;
     background: var(--text);
     border-radius: 2px;
     transition: .22s;
 }

 .hamburger.open span:nth-child(1) {
     transform: translateY(7px) rotate(45deg);
 }

 .hamburger.open span:nth-child(2) {
     opacity: 0;
 }

 .hamburger.open span:nth-child(3) {
     transform: translateY(-7px) rotate(-45deg);
 }

 /* mega */
 .has-mega {
     position: relative;
 }

 .has-mega:hover .mega-panel,
 .has-mega:focus-within .mega-panel {
     display: block;
 }

 .mega-container {
     position: absolute;
     padding: 20px;
     top: -30px;
     width: 100%;
 }

 .mega-panel {
     display: none;
     position: absolute;
     top: calc(100% + 30px);
     left: 100%;
     transform: translateX(-50%);
     width: 1300px;
     background: linear-gradient(135deg, #1a3a82, #4C79D9);
     border-radius: 22px;
     padding: 30px 34px;
     box-shadow: 0 24px 60px rgba(33, 68, 144, .3);
     z-index: 999;
 }

 .mega-panel::before {
     content: '';
     position: absolute;
     top: -15px;
     left: 45%;
     transform: translateX(-50%) rotate(45deg);
     width: 30px;
     height: 30px;
     background: #2b50a0;
     border-radius: 5px 0px 0px 0px;
 }

 .mega-title {
     font-size: 25px;
     font-weight: 400;
     color: #fff;
     margin-bottom: 22px;
 }

 .mega-title span {
     font-weight: 700;
     font-style: italic;
 }

 .mega-grid {
     display: flex;
     align-items: center;
 }

 .mega-col h6 {
     font-size: 15px;
     font-weight: 700;
     letter-spacing: 1px;
     color: #fff;
     margin-bottom: 12px;
 }

 .mega-col a {
     display: block;
     color: rgba(255, 255, 255, .50);
     text-decoration: none;
     font-size: 14px;
     font-weight: 500;
     margin-bottom: 9px;
     transition: .12s;
 }

 .mega-col a:hover {
     color: #fff;
     padding-left: 4px;
 }

 /* drop */
 .has-drop {
     position: relative;
 }

 .has-drop:hover .drop-panel,
 .has-drop:focus-within .drop-panel {
     display: block;
 }

 .drop-panel {
     display: none;
     position: absolute;
     top: calc(100% + 10px);
     left: 50%;
     transform: translateX(-50%);
     background: #fff;
     border-radius: 14px;
     box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
     padding: 8px;
     min-width: 160px;
     z-index: 999;
 }

 .drop-panel a {
     display: block;
     padding: 9px 16px;
     color: var(--text);
     text-decoration: none;
     font-size: 14px;
     border-radius: 8px;
     transition: .12s;
 }

 .drop-panel a:hover {
     background: #f0f4ff;
     color: var(--blue);
 }

 /* mobile drawer */
 .mob-drawer {
     display: none;
     background: #fff;
     border-top: 1px solid #f0f0f0;
 }

 .mob-drawer.open {
     display: block;
 }

 .mob-inner {
     padding: 14px 0 22px;
 }

 .mob-link {
     display: block;
     padding: 13px 0;
     color: var(--text);
     text-decoration: none;
     font-size: 15px;
     font-weight: 500;
     border-bottom: 1px solid #f5f5f5;
 }

 .mob-link:last-child {
     border-bottom: none;
 }

 .mob-link:hover {
     color: var(--blue);
 }

 .mob-sec {
     font-size: 11px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: #bbb;
     margin: 14px 0 4px;
 }

 .mob-sub {
     display: block;
     padding: 8px 12px;
     color: var(--muted);
     text-decoration: none;
     font-size: 14px;
     border-radius: 8px;
     transition: .12s;
 }

 .mob-sub:hover {
     background: #f0f4ff;
     color: var(--blue);
 }

 /* ═══════════════════════════════
       HERO  
       Light blue-gradient background, full-width
    ═══════════════════════════════ */
 .hero-wrap {
     background-image: url(../Images/bannder-bg.jpg);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     position: relative;
     top: -68px;
     overflow: hidden;
     padding-bottom: 0;
 }

 /* Subtle radial glow in the centre */
 .hero-wrap::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 900px;
     height: 600px;
     background: radial-gradient(ellipse at center, rgba(255, 255, 255, .55) 0%, transparent 70%);
     pointer-events: none;
 }

 .hero-top {
     text-align: center;
     padding: 120px 0px 36px;
     position: relative;
     z-index: 2;
 }

 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background: #f4f7fe;
     border: 1px solid #21449033;
     backdrop-filter: blur(4px);
     border-radius: 30px;
     padding: 6px 16px;
     font-size: 13px;
     font-weight: 500;
     color: var(--blue);
     margin-bottom: 20px;
 }

 .hero-top h1 {
     font-size: 52px;
     font-weight: 400;
     line-height: 1.18;
     margin-bottom: 14px;
     color: #111;
 }

 .hero-top h1 span {
     font-weight: 800;
     font-style: italic;
     color: var(--blue);
 }

 .hero-sub {
     font-size: 20px;
     color: var(--muted);
     max-width: 575px;
     margin: 0 auto 28px;
     line-height: 1.75;
 }

 .hero-input-row {
     display: flex;
     align-items: center;
     gap: 8px;
     max-width: 540px;
     margin: 0 auto;
     background: #fff;
     border: 1.5px solid #dde3f0;
     border-radius: 50px;
     padding: 7px 7px 7px 20px;
     box-shadow: 0 6px 32px rgba(33, 68, 144, .14);
 }

 .hero-input-row input {
     flex: 1;
     border: none;
     outline: none;
     font-size: 14px;
     font-family: var(--font);
     min-width: 0;
     background: transparent;
 }

 .hero-input-row input::placeholder {
     color: #aab0c0;
 }

 .input-vector {
     margin-top: -50px;
     position: relative;
     z-index: 99;
 }

 .hero-vector img {
     margin-top: -50px;
     position: relative;
     z-index: -1;
 }



 .btn-gen {
     background: linear-gradient(90deg, #1e3d87, #4C79D9);
     color: #fff;
     border: none;
     border-radius: 30px;
     padding: 10px 22px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     white-space: nowrap;
     display: flex;
     align-items: center;
     gap: 6px;
     flex-shrink: 0;
 }

 .btn-gen:hover {
     opacity: .9;
 }

 /* ─── HERO FOOD CIRCLE FULL-WIDTH SLIDER ─── */
 .hero-slider-section {
     padding: 50px 0px 0px 0px;
     position: relative;
 }

 .white-overlay {
     position: absolute;
     top: -50px;
     height: 250px;
     width: 100%;
     background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.8) 90%);
 }

 .hero-meal {
     margin: 0px 50px;
 }

 .hero-meal img {
     width: 155px;
 }

 .hero-meal.left,
 .hero-meal.right {
     margin-top: -100px;
 }

 .hero-meal.one,
 .hero-meal.five {
     margin-top: -30px;
 }

 .hero-meal.three {
     margin-top: 20px;
 }

 /* ─── HERO RECIPE PREVIEW CARD ─── */
 .hero-card-section {
     background: linear-gradient(180deg, rgba(200, 216, 255, .6) 0%, rgba(232, 237, 255, .9) 100%);
     padding: 0 20px 50px;
     position: relative;
     z-index: 2;
 }

 .hero-card {
     max-width: 740px;
     margin: 28px auto 0;
     background: #fff;
     border: 1.5px solid #dce5ff;
     border-radius: 20px;
     padding: 24px 28px;
     box-shadow: 0 12px 50px rgba(33, 68, 144, .12);
 }

 .hc-top {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 16px;
 }

 .hc-lbl {
     font-size: 11px;
     color: #9aa5c0;
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 5px;
 }

 .hc-title {
     font-size: 16px;
     font-weight: 700;
     color: var(--text);
 }

 .hc-meta {
     display: flex;
     border-top: 1px solid #eef1fa;
     border-bottom: 1px solid #eef1fa;
     padding: 12px 0;
     margin-bottom: 14px;
     gap: 0;
 }

 .hcm {
     flex: 1;
     padding-right: 14px;
     margin-right: 14px;
     border-right: 1px solid #eef1fa;
 }

 .hcm:last-child {
     border-right: none;
     padding-right: 0;
     margin-right: 0;
 }

 .hcm .ml {
     font-size: 10px;
     color: #b0bad0;
     text-transform: uppercase;
     letter-spacing: .4px;
     margin-bottom: 4px;
 }

 .hcm .mv {
     font-size: 13px;
     font-weight: 600;
 }

 .hc-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 7px;
 }

 .hc-tag {
     background: #f0f4ff;
     border: 1px solid #d8e4ff;
     border-radius: 20px;
     padding: 5px 13px;
     font-size: 12px;
     color: var(--blue);
     font-weight: 500;
 }

 /* ═══════════════════════════════
       SECTION BADGE
    ═══════════════════════════════ */
 .sec-badge {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background: #f0f4ff;
     border: 1px solid #d0dbf5;
     border-radius: 30px;
     padding: 5px 14px;
     font-size: 12px;
     font-weight: 600;
     color: var(--blue);
     margin-bottom: 14px;
 }

 /* ═══════════════════════════════
       HOW IT WORKS
       3 illustrated step cards — matching design screenshot
    ═══════════════════════════════ */
 .how-sec {
     padding: 80px 0;
     text-align: center;
 }

 .how-sec h2 {
     font-size: 38px;
     font-weight: 600;
     margin-bottom: 10px;
 }

 .how-sec h2 span {
     font-weight: 700;
     font-style: italic;
     color: var(--blue);
 }

 .how-sub {
     color: var(--muted);
     max-width: 800px;
     margin: 0 auto 80px;
     line-height: 1.75;
     font-size: 15px;
 }

 .how-row {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 0px;
 }

 /* Card structure: top text + bottom illustration */
 .how-card-1 {
     overflow: hidden;
     text-align: left;
     box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
     transition: .25s;
     position: relative;
     min-height: 250px;
     box-sizing: border-box;
     width: 100%;
     left: 0px;
     top: 0px;
     background: #C9FFEE;
     border: 2px solid rgba(33, 144, 109, 0.1);
     border-radius: 30px;
     transform: rotate(-2.4deg);
     z-index: 0;
 }

 .how-card-1:hover {
     transform: translateY(-4px);
     box-shadow: 0 14px 44px rgba(33, 68, 144, .12);
 }

 .how-card-1-text {
     padding: 24px 24px 20px;
     display: flex;
     flex-direction: column;
     height: 100%;
     justify-content: space-between;
 }

 .how-card-1 img {
     position: absolute;
     right: 0;
     bottom: -10px;
     width: 130px;
 }

 .how-step-badge {
     text-transform: uppercase;
     text-align: right;
     font-style: normal;
     font-weight: 600;
     font-size: 60px;
     line-height: 40px;
     color: #B4EBAF;
     transform: rotate(-2.4deg);
     position: absolute;
     top: -5px;
     right: 20px;
 }

 .how-card-1-text h5 {
     margin-bottom: 8px;
     width: 229px;
     height: 40px;
     font-style: normal;
     font-weight: 600;
     font-size: 34px;
     line-height: 40px;
     color: #219039;
     transform: rotate(-2.4deg);
     flex: none;
     order: 0;
     align-self: stretch;
     flex-grow: 0;
 }

 .how-card-1-text p {
     font-size: 18px;
     color: #00000060;
     width: 230px;
     transform: rotate(-2.4deg);
 }

 .how-card-1.yellow {
     transform: unset;
     left: -10px;
     top: -27px;
     box-sizing: border-box;
     width: 100%;
     height: 340px;
     background: #FFF7E0;
     border: 2px solid rgba(144, 98, 33, 0.1);
     border-radius: 30px;
     z-index: 1;
 }

 .how-card-1.yellow h5 {
     width: 238px;
     height: 93px;
     font-style: normal;
     font-weight: 600;
     font-size: 34px;
     line-height: 40px;
     color: #C24B27;
     flex: none;
     order: 0;
     align-self: stretch;
     flex-grow: 1;
 }

 .how-card-1.yellow .how-step-badge {
     color: #FF8000;
 }

 .how-card-1.pink {
     box-sizing: border-box;
     width: 100%;
     height: 340px;
     left: -60px;
     top: 20px;
     background: #F9DBFF;
     border: 2px solid rgba(142, 33, 144, 0.1);
     border-radius: 30px;
     transform: rotate(2.4deg);
     z-index: 2;
 }

 .how-card-1.pink h5 {
     font-weight: 600;
     font-size: 34px;
     line-height: 40px;
     color: #C2279B;
 }

 .pink .how-step-badge {
     color: rgba(174, 0, 255, 0.2);
 }

 .how-card-1.pink:hover {
     transform: unset;
 }

 /* Illustration / mockup area */
 .how-card-1-illus {
     padding: 20px 20px 24px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     min-height: 165px;
     position: relative;
 }


 /* Mockup widgets inside illustrations */
 .mock-box {
     background: #fff;
     border-radius: 14px;
     padding: 12px 16px;
     box-shadow: 0 4px 18px rgba(0, 0, 0, .1);
     width: 88%;
 }

 .mock-box-sm {
     background: #fff;
     border-radius: 10px;
     padding: 10px 14px;
     box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
     width: 88%;
     margin-top: 8px;
 }

 .mock-url-bar {
     display: flex;
     align-items: center;
     gap: 8px;
     background: #f4f6fa;
     border: 1px solid #e0e5f0;
     border-radius: 30px;
     padding: 8px 14px;
     margin-bottom: 10px;
 }

 .mock-url-bar .yt-dot {
     width: 20px;
     height: 20px;
     border-radius: 4px;
     background: #ff4444;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .mock-url-bar .yt-dot i {
     color: #fff;
     font-size: 10px;
 }

 .mock-url-bar span {
     font-size: 11px;
     color: #a0a8bc;
     flex: 1;
 }

 .mock-gen-btn {
     background: linear-gradient(90deg, #1e3d87, #4C79D9);
     color: #fff;
     border: none;
     border-radius: 30px;
     padding: 7px 16px;
     font-size: 11px;
     font-weight: 600;
     width: 100%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 5px;
 }

 .mock-ai-row {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 7px 0;
     border-bottom: 1px solid #f0f3fa;
     font-size: 12px;
     color: var(--muted);
 }

 .mock-ai-row:last-child {
     border-bottom: none;
 }

 .mock-ai-dot {
     width: 22px;
     height: 22px;
     border-radius: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     flex-shrink: 0;
 }

 .mock-ai-dot.blue {
     background: #dce5ff;
 }

 .mock-ai-dot.green {
     background: #c8f5de;
 }

 .mock-ai-dot.yellow {
     background: #fff0c8;
 }

 .mock-check {
     width: 16px;
     height: 16px;
     border-radius: 50%;
     background: #d0dbf5;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-left: auto;
     font-size: 9px;
     color: var(--blue);
     flex-shrink: 0;
 }

 .mock-recipe-tag {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     background: #f0f4ff;
     border-radius: 8px;
     padding: 4px 8px;
     font-size: 11px;
     color: var(--blue);
     margin: 2px;
 }

 .mock-step-row {
     display: flex;
     align-items: flex-start;
     gap: 6px;
     margin-bottom: 6px;
     font-size: 11px;
     color: var(--muted);
 }

 .mock-step-num {
     width: 18px;
     height: 18px;
     border-radius: 50%;
     background: #c3e6d0;
     color: #198754;
     font-size: 9px;
     font-weight: 700;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     margin-top: 1px;
 }

 /* ═══════════════════════════════
       CTA BAND
    ═══════════════════════════════ */
 .cta-band-wrap {
     padding: 0 0 80px;
 }

 .cta-band {
     padding: 58px 48px;
     text-align: center;
     position: relative;
     overflow: hidden;
     background-image: url(../Images/cook-it-bg.png);
     background-repeat: no-repeat;
     background-position: center;
     border-radius: 40px !important;
 }

 .cta-band h2 {
     font-size: 34px;
     font-weight: 400;
     color: #fff;
     margin-bottom: 10px;
     position: relative;
     z-index: 1;
 }

 .cta-band h2 span {
     font-weight: 800;
     font-style: italic;
 }

 .cta-band p {
     position: relative;
     z-index: 1;
     font-weight: 400;
     font-size: 18px;
     line-height: 130%;
     text-align: center;
     color: rgba(255, 255, 255, 0.8);
     max-width: 620px;
     margin: 0 auto;
     margin-bottom: 50px;
 }

 .cta-input {
     display: flex;
     align-items: center;
     gap: 8px;
     max-width: 500px;
     margin: 0 auto;
     background: rgba(255, 255, 255, .15);
     border-radius: 50px;
     padding: 7px 7px 7px 20px;
     position: relative;
     z-index: 1;
     backdrop-filter: blur(4px);
 }

 .cta-input input {
     flex: 1;
     background: none;
     border: none;
     outline: none;
     color: #fff;
     font-family: var(--font);
     font-size: 14px;
     min-width: 0;
 }

 .cta-input input::placeholder {
     color: rgba(255, 255, 255, .5);
 }

 .btn-cook {
     background: #fff;
     color: var(--blue);
     border: none;
     border-radius: 30px;
     padding: 10px 24px;
     font-size: 14px;
     font-weight: 700;
     cursor: pointer;
     white-space: nowrap;
 }

 .btn-cook:hover {
     background: #eef2ff;
 }

 /* ═══════════════════════════════
       RECIPE SLIDER — full width peek
    ═══════════════════════════════ */
 /* =========================
   SECTION
========================= */
 .recipes-sec {
     padding: 0 0 80px;
 }

 .sec-hdr {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     margin-bottom: 60px;
     gap: 20px;
     flex-wrap: wrap;
 }

 .sec-hdr-l h2 {
     font-size: 32px;
     font-weight: 400;
 }

 .sec-hdr-l h2 span {
     font-weight: 700;
     font-style: italic;
     color: var(--blue);
 }

 .sec-hdr-l p {
     font-size: 14px;
     color: var(--muted);
     max-width: 360px;
     margin-top: 6px;
     line-height: 1.55;
 }

 /* =========================
   ARROWS
========================= */
 .arr-group {
     display: flex;
     gap: 10px;
     align-items: center;
 }

 .arr-btn {
     height: 40px;
     padding: 0 30px;
     border-radius: 999px;
     border: 1.5px solid #e0e4f0;
     background: #f5f8ff;
     font-size: 14px;
     cursor: pointer;
     transition: 0.3s ease;
 }

 #rNext,
 .arr-btn:hover {
     background: linear-gradient(90deg, #214490 0%, #4C79D9 100%);
     color: #fff;
 }

 /* =========================
   FULL WIDTH SLIDER
========================= */
 .fw-slider-outer {
     margin: 0 -8px;
     position: relative;
     overflow: hidden;
 }

 .fw-track {
     display: flex;
     gap: 20px;
     padding: 60px 60px 0px;
     transition: transform .4s ease;
 }
 .fw-track.testi {
        padding-top: 0px;
    }
 /* =========================
   CARD
========================= */
 .fw-slide {
     flex: 0 0 calc((100% - 120px - 40px) / 3.1);
     min-width: 260px;
     background: #f5f8ff;
     border-radius: 24px;
     padding: 110px 20px 25px;
     position: relative;
     transition: .3s ease;
 }

 .fw-slide:hover {
     transform: translateY(-6px);
     box-shadow: 0 15px 40px rgba(33, 68, 144, 0.12);
 }

 /* Image */
 .fw-slide .rc {
     position: absolute;
     top: -60px;
     left: 80px;
     transform: translateX(-50%);
 }

 .fw-slide .rc img {
     width: 120px;
     height: 120px;
 }

 /* Title */
 .fw-slide h3 {
     font-size: 22px;
     font-weight: 600;
     color: #214490;
     margin-bottom: 20px;
     line-height: 1.4;
 }

 /* Details */
 .rec-det-p {
     font-size: 12px;
     opacity: 0.6;
     margin-bottom: 4px;
 }

 .rec-det-h {
     font-size: 18px;
     font-weight: 600;
 }

 /* Button */
 .view-recipe {
     position: absolute;
     top: 20px;
     right: 20px;
     padding: 8px 16px;
     border-radius: 30px;
     border: none;
     font-size: 13px;
     background: linear-gradient(90deg, #214490 0%, #4C79D9 100%);
     color: #fff;
     cursor: pointer;
     transition: 0.3s ease;
 }

 .view-recipe:hover {
     background: #000;
 }

 /* ═══════════════════════════════
       CATEGORIES
    ═══════════════════════════════ */
 .cats-sec {
     padding: 0 0 80px;
     text-align: center;
 }

 .cats-sec h2 {
     font-size: 36px;
     font-weight: 400;
     margin-bottom: 10px;
 }

 .cats-sec h2 span {
     font-weight: 700;
     font-style: italic;
     color: var(--blue);
 }

 .cats-sub {
     color: var(--muted);
     max-width: 460px;
     margin: 0 auto 36px;
     line-height: 1.7;
     font-size: 15px;
 }

 .cat-grid {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 12px;
     margin-bottom: 50px;
 }

 .cat-chip {
     display: flex;
     align-items: center;
     gap: 20px;
     padding: 8px 20px 10px 8px;
     border: 1.5px solid #e2e8f5;
     border-radius: 50px;
     cursor: pointer;
     transition: .18s;
     background: #F1F1F1;
     font-style: normal;
     font-weight: 500;
     font-size: 20px;
     line-height: 30px;
     color: #000000;
 }

 .cat-chip img {
     height: 50px;
     width: 50px;
 }

 .cat-chip:hover {
     border-color: var(--blue);
     color: var(--blue);
     background: #f0f4ff;
 }

 .cat-chip .ce {
     font-size: 20px;
 }

 .btn-cat {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     border: 1.5px solid var(--blue);
     color: #ffffff;
     border-radius: 30px;
     padding: 12px 28px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     background: #1e3d87;
     transition: .18s;
     text-decoration: none;
 }

 .btn-cat:hover {
     background: #000;
 }

 /* ═══════════════════════════════
       TESTIMONIALS — full-width peek
    ═══════════════════════════════ */

 .testi-sec h2 {
     font-size: 32px;
     font-weight: 400;
 }

 .testi-sec h2 span {
     font-weight: 700;
     font-style: italic;
     color: var(--blue);
 }

 .tc {
     background: #fff;
     border: 1.5px solid #ebebeb;
     border-radius: 20px;
     padding: 26px;
     height: 100%;
     transition: .2s;
 }

 .tc:hover {
     box-shadow: 0 8px 32px rgba(33, 68, 144, .1);
 }

 .stars {
     color: #f59e0b;
     font-size: 16px;
     margin-bottom: 12px;
     letter-spacing: 1px;
 }

 .tc-text {
     font-size: 16px;
     font-weight: 600;
     color: var(--dark);
     line-height: 1.7;
     margin-bottom: 18px;
 }

 .tc-auth {
     display: flex;
     align-items: center;
     gap: 20px;
 }

 .tc-av {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: #e8eef8;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     flex-shrink: 0;
 }

 .tc-role {
     font-weight: 600;
     font-size: 14px;
 }

 .tc-name {
     font-size: 16px;
     font-weight: 600;
     color: var(--blue);
 }

 section.testi-sec .fw-slide {
     padding: 0;
 }

 section.testi-sec .sec-hdr {
     margin-bottom: 30px;
 }

 section.testi-sec .tc {
     background: #f5f8ff;
 }

 .quote-img {
     position: absolute;
     right: 20px;
     overflow: hidden;
     bottom: 0px;
 }

 /* ═══════════════════════════════
       FEATURES
    ═══════════════════════════════ */
 .feat-sec {
     padding: 0 0 80px;
 }

 .feat-sec h2 {
     font-size: 34px;
     font-weight: 400;
     margin-bottom: 10px;
 }

 .feat-sec h2 span {
     font-weight: 700;
     font-style: italic;
     color: var(--blue);
 }

 .fsub {
     color: var(--muted);
     max-width: 480px;
     line-height: 1.7;
     margin-bottom: 40px;
 }

 .fc-card {
     border-radius: 20px;
     padding: 28px;
     height: 100%;
 }

 .fc-card.y {
     background: #fffbe6;
     border: 1.5px solid #ffe89a;
 }

 .fc-card.p {
     background: #fff0f5;
     border: 1.5px solid #ffd6e5;
 }

 .fc-card.b {
     background: #f0f4ff;
     border: 1.5px solid #d0dbf5;
 }

 .fc-card.g {
     background: #f0fff5;
     border: 1.5px solid #c3e6d0;
 }

 .ficon {
     width: 46px;
     height: 46px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 22px;
     margin-bottom: 16px;
 }

 .ficon.y {
     background: #ffe89a;
 }

 .ficon.p {
     background: #ffd6e5;
 }

 .ficon.b {
     background: #d0dbf5;
 }

 .ficon.g {
     background: #c3e6d0;
 }

 .fc-card h5 {
     font-size: 17px;
     font-weight: 700;
     margin-bottom: 8px;
 }

 .fc-card p {
     font-size: 13px;
     color: var(--muted);
     line-height: 1.65;
 }

 .wl {
     font-size: 11px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: #b8c4d8;
     margin-top: 14px;
     margin-bottom: 6px;
 }

 .wi {
     font-size: 13px;
     color: var(--muted);
     margin-bottom: 3px;
 }

 /* ═══════════════════════════════
       BUILT FOR
    ═══════════════════════════════ */

 .why-card-1 {
     overflow: hidden;
     text-align: left;
     box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
     transition: .25s;
     position: relative;
     min-height: 250px;
     box-sizing: border-box;
     width: 100%;
     left: 0px;
     top: 0px;
     background: #C9FFEE;
     border: 2px solid rgba(33, 144, 109, 0.1);
     border-radius: 30px;
     transform: rotate(-2.4deg);
     z-index: 0;
     padding: 30px;
 }

 .why-card-1:hover {
     transform: rotate(0.0deg);
 }

 .why-card-1-text img {
     padding: 10px;
 }

 .why-card-1-text h6 {
     font-size: 18px;
     font-weight: 600;
 }

 .why-card-1-text p {
     font-size: 15px;
 }

 .why-heading {
     display: flex;
     align-items: center;
     margin-bottom: 20px;
 }


 .why-card-1.yellow {
     transform: unset;
     left: -10px;
     top: -27px;
     box-sizing: border-box;
     width: 100%;
     height: 340px;
     background: #FFF7E0;
     border: 2px solid rgba(144, 98, 33, 0.1);
     border-radius: 30px;
     z-index: 1;
 }

 .why-heading2,
 .why-heading3,
 .why-heading4,
 .why-heading5,
 .why-heading6 {
     display: flex;
     align-items: center;
 }

 .why-heading {
     font-size: 28px;
     font-weight: 600;
     color: #219039;
 }

 .why-heading2 span {
     font-size: 28px;
     font-weight: 600;
     color: #C24B27;
 }

 .why-heading3 span {
     font-size: 28px;
     font-weight: 600;
     color: #C2279B;
 }

 .why-card-1.pink {
     box-sizing: border-box;
     width: 100%;
     height: 340px;
     left: -60px;
     top: 20px;
     background: #F9DBFF;
     border: 2px solid rgba(142, 33, 144, 0.1);
     border-radius: 30px;
     transform: rotate(2.4deg);
     transition: .25s;
     z-index: 2;
 }

 .why-card-1.pink:hover {
     transform: rotate(0.0deg);
 }

 .why-heading4 span {
     font-size: 28px;
     font-weight: 600;
     color: #214490;
 }

 .why-heading5 span {
     font-size: 28px;
     font-weight: 600;
     color: #C22727;
 }

 .why-heading6 span {
     font-size: 28px;
     font-weight: 600;
     color: #27A6C2;
 }

 .why-card-2 {
     overflow: hidden;
     text-align: left;
     box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
     transition: .25s;
     position: relative;
     min-height: 250px;
     box-sizing: border-box;
     width: 100%;
     left: 0px;
     top: 0px;
     background: #e4f3ff;
     border: 2px solid rgba(33, 144, 109, 0.1);
     border-radius: 30px;
     transform: rotate(2.4deg);
     z-index: 0;
     padding: 30px;
 }

 .why-card-2:hover {
     transform: rotate(0.0deg);
 }

 .why-card-2.yellow {
     transform: unset;
     left: -10px;
     top: 80px;
     box-sizing: border-box;
     width: 100%;
     height: 340px;
     background: #fff1f1;
     border: 2px solid rgba(144, 98, 33, 0.1);
     border-radius: 30px;
     z-index: 1;
 }

 .why-card-2.pink {
     box-sizing: border-box;
     width: 100%;
     height: 340px;
     left: -60px;
     top: 20px;
     background: #effcff;
     border: 2px solid rgba(142, 33, 144, 0.1);
     border-radius: 30px;
     transform: rotate(-2.4deg);
     transition: .25s;
     z-index: 2;
 }

 .why-card-2.pink:hover {
     transform: rotate(0.0deg);
 }













 .built-sec h2 {
     font-size: 34px;
     font-weight: 400;
     margin-bottom: 10px;
     text-align: center;
 }

 .built-sec h2 span {
     font-weight: 700;
     font-style: italic;
     color: var(--blue);
 }

 .bsub {
     text-align: center;
     color: var(--muted);
     max-width: 460px;
     margin: 0 auto 40px;
     line-height: 1.7;
 }

 .bc {
     border-radius: 20px;
     padding: 26px;
     height: 100%;
 }

 .bc.bl {
     background: #f0f4ff;
     border: 1.5px solid #d0dbf5;
 }

 .bc.rl {
     background: #fff5f0;
     border: 1.5px solid #ffd0c0;
 }

 .bc.gl {
     background: #f0fff5;
     border: 1.5px solid #c3e6d0;
 }

 .bc.pl {
     background: #f8f0ff;
     border: 1.5px solid #dfc3e6;
 }

 .bicon {
     width: 44px;
     height: 44px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     margin-bottom: 14px;
 }

 .bicon.bl {
     background: #d0dbf5;
 }

 .bicon.rl {
     background: #ffd0c0;
 }

 .bicon.gl {
     background: #c3e6d0;
 }

 .bicon.pl {
     background: #dfc3e6;
 }

 .bc h5 {
     font-size: 16px;
     font-weight: 700;
     margin-bottom: 8px;
 }

 .bc p {
     font-size: 13px;
     color: var(--muted);
     line-height: 1.65;
 }

 .bwl {
     font-size: 11px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: #b8c4d8;
     margin-top: 12px;
     margin-bottom: 5px;
 }

 .bwi {
     font-size: 12px;
     color: var(--muted);
     margin-bottom: 2px;
 }

 /* ═══════════════════════════════
       FINAL CTA
    ═══════════════════════════════ */
 .final-wrap {
     padding: 0 0 80px;
 }

 .final-cta {
     background-image: url(../Images/cat-footer.png);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     border-radius: 24px;
     padding: 72px 40px;
     text-align: center;
     border: 1.5px solid #d0daf5;
 }


 .final-cta h2 {
     font-size: 38px;
     font-weight: 400;
     margin-bottom: 14px;
 }

 .final-cta h2 span {
     font-weight: 800;
     font-style: italic;
     color: var(--blue);
 }

 .final-cta p {
     color: var(--muted);
     max-width: 440px;
     margin: 0 auto 28px;
     line-height: 1.7;
 }

 .final-cta-inner {
     padding-top: 20px;
 }

 .btn-final {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: linear-gradient(90deg, #1e3d87, #4C79D9);
     color: #fff;
     border: none;
     border-radius: 30px;
     padding: 14px 30px;
     font-size: 15px;
     font-weight: 600;
     cursor: pointer;
     text-decoration: none;
 }

 .btn-final:hover {
     opacity: .9;
     color: #fff;
 }

 /* ═══════════════════════════════
       FOOTER
    ═══════════════════════════════ */
 footer {
     padding: 30px 0 0px;
 }

 .ft-brand {
     font-size: 50px;
     font-weight: 600;
     color: var(--blue);
     letter-spacing: -.5px;
     margin-bottom: 10px;
 }

 .ft-tag {
     font-size: 16px;
     color: var(--muted);
     max-width: 450px;
     line-height: 1.65;
     margin-bottom: 18px;
 }

 .ftl {
     font-size: 11px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: #c0cad8;
     margin-bottom: 3px;
 }

 .ftv {
     font-size: 13px;
     color: var(--muted);
     margin-bottom: 12px;
 }

 .contect-text {
     font-size: 18px;
     color: var(--blue);
     font-weight: 600;
 }

 .contact-detils {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
 }

 .contact-detils .ftl {
     color: #000;
 }

 .contact-detils .ftv a {
     color: var(--blue);
     font-size: 16px;
     font-weight: 600;
 }

 .footer-text {
     color: var(--blue);
 }

 footer h6 {
     font-size: 16px;
     font-weight: 700;
     margin-bottom: 14px;
 }

 footer a {
     display: block;
     font-size: 13px;
     color: var(--dark);
     text-decoration: none;
     margin-bottom: 8px;
 }

 footer a:hover {
     color: var(--blue);
 }

 .ft-bottom {
     border-top: 1px solid #f0f0f0;
     margin-top: 40px;
     padding: 12px 0;
     text-align: center;
     font-size: 15px;
     color: #ffffff;
     background: linear-gradient(90deg, #1e3d87, #4C79D9);
 }

 

 /* ═══════════════════════════════ Recipe Detail Page Css Start! ═══════════════════════════════ */

 .page-header {
     padding: 100px 0px;
     text-align: center;
 }

 .page-header p {
    color: rgba(0, 0, 0, .60);
 }

 .page-header span {
     font-weight: 700;
     font-style: italic;
     color: var(--blue);
 }

 .youtube-link h6 {
     font-size: 17px;
     font-weight: 700;
     margin-left: 86px;
     margin-bottom: 20px;
 }

 .youtube-link h6 a {
     color: #219039;
     font-weight: 500
 }

 .recipe-bar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 30px 60px;
     gap: 30px;
     border-top: 1px solid #dddddd;
     border-bottom: 1px solid #dddddd;
 }

 .recipe-info {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
 }

 .recipe-item {
     padding: 0 40px;
     text-align: left;
     position: relative;
 }

 /* Vertical divider */
 .recipe-item:not(:last-child)::after {
     content: "";
     position: absolute;
     right: 0;
     top: -30px;
     height: 119px;
     width: 1px;
     background-color: #dddddd;
 }

 .recipe-item p {
     margin: 0;
     font-size: 16px;
     color: #6d6d6d;
     font-weight: 400;
 }

 .recipe-item h6 {
     margin: 8px 0 0;
     font-size: 20px;
     font-weight: 700;
     color: #c2188b;
 }

 /* Button */
 .video-btn {
     background: linear-gradient(90deg, #2f4fa2, #4c73c2);
     color: #fff;
     padding: 8px 30px;
     border-radius: 40px;
     text-decoration: none;
     font-weight: 600;
     font-size: 18px;
     display: inline-block;
     transition: 0.3s ease;
     white-space: nowrap;
 }

 .video-btn:hover {
     opacity: 0.9;
 }




 .butter-chicken img {
     width: 100%;
     padding: 50px 0px;
 }


 /* ═══════════════════════════════ Recipe Detail Page Css Start! ═══════════════════════════════ */


 .recipe-summary-section {
     padding: 60px 0;
     background: #ffffff;
     font-family: 'Segoe UI', sans-serif;
 }

 .container {
     width: 90%;
     max-width: 1200px;
     margin: auto;
 }

 /* ================= TITLE ================= */

 .section-title {
     font-size: 32px;
     font-weight: 700;
     margin-bottom: 15px;
 }

 .section-title span {
     color: #2f4fa2;
     font-style: italic;
 }

 .summary-text {
     margin-bottom: 40px;
     font-size: 17px;
     line-height: 1.7;
 }





 /* ================= INGREDIENT GRID ================= */

 .ingredients-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 30px;
     margin-bottom: 40px;
 }

 /* Ingredient Cards */
 .ingredients-card {
     padding: 30px;
     border-radius: 20px;
 }

 .green-card {
     background: linear-gradient(135deg, #dff4ec, #c8e8dd);
 }

 .blue-card {
     background: linear-gradient(135deg, #e3eaf8, #d2dcf2);
 }

 .ingredients-card h3 {
     font-size: 22px;
     margin-bottom: 20px;
 }

 .ingredients-card.green-card h3 span {
     font-style: italic;
     font-weight: 700;
     color: #219039;
 }

 .ingredients-card.blue-card h3 span {
     color: #214490;
 }

 .ingredients-card ol {
     padding-left: 18px;
     margin: 0;
 }

 .ingredients-card li {
     display: flex;
     justify-content: space-between;
     gap: 20px;
     margin-bottom: 12px;
     font-size: 16px;
 }

 .ingredients-card li span {
     flex: 1;
     font-weight: 600;
 }

 .ingredients-card.green-card li b {
     font-weight: 600;
     white-space: nowrap;
     color: #219039;
 }

 .ingredients-card.blue-card li b {
     color: #214490;
 }

 /* ================= INSTRUCTIONS ================= */

 .instructions-card {
     background: linear-gradient(135deg, #f3eee5, #e9e2d6);
     padding: 35px;
     border-radius: 20px;
 }

 .instructions-card h3 {
     font-size: 24px;
     margin-bottom: 25px;
 }

 .instructions-card h3 span {
     color: #c55a2b;
     font-style: italic;
 }

 .step {
     margin-bottom: 22px;
 }

 .step h4 {
     color: #c55a2b;
     font-weight: 600;
     margin-bottom: 8px;
 }

 .step p {
     font-size: 16px;
     line-height: 1.7;
 }



 /* Wrapper */
 .search-wrapper {
     width: 100%;
     display: flex;
     justify-content: center;
     padding: 10px;
 }

 /* Search bar container */
 .search-box {
     width: 100%;
     max-width: 650px;
     background: linear-gradient(90deg, #1e3d87, #4C79D9);
     padding: 3px 8px;
     border-radius: 50px;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .search-box input::placeholder {
     color: #aab0c0;
 }

 /* Input */
 .search-box input {
     flex: 1;
     padding: 14px 20px;
     border: none;
     outline: none;
     border-radius: 40px;
     font-size: 16px;
     background: transparent;
     color: #fff;
 }



 /* Button */
 .search-box button {
     padding: 8px 20px;
     border: 2px solid #ffffff;
     background: #ffffff;
     color: #1e3d87;
     font-size: 16px;
     border-radius: 40px;
     cursor: pointer;
     font-weight: 600;
     transition: 0.2s;
 }

 .search-box button:hover {
     background: transparent;
     color: #ffffff;
 }

.row.categories {
    gap: 50px 22px;
}

 .fw-slide.cate {
    flex: 0 0 calc((100% - 0px - 0px) / 3.1);
     max-width: 380px !important;
     background: #f5f8ff;
     border-radius: 24px;
     padding: 110px 20px 25px;
     position: relative;
     transition: .3s ease;
 }



 /* RESPONSIVE BREAKPOINTS */

 /* Tablets */
 @media (max-width: 768px) {
     .search-box {
         padding: 10px;
     }

     .search-box input {
         font-size: 15px;
         padding: 12px 16px;
     }

     .search-box button {
         padding: 12px 20px;
         font-size: 15px;
     }
 }

 /* Mobile */
 @media (max-width: 480px) {
     .search-box {
         flex-direction: column;
         border-radius: 30px;
         padding: 15px;
     }

     .search-box input,
     .search-box button {
         width: 100%;
         border-radius: 30px;
     }

     .search-box button {
         margin-top: 8px;
     }
 }





 /* ═══════════════════════════════ How it Works Page Css Start! ═══════════════════════════════ */


 .container.line {
     position: relative;
 }

 .step-card-1 {
     overflow: hidden;
     text-align: left;
     box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
     transition: .25s;
     position: relative;
     min-height: 250px;
     box-sizing: border-box;
     width: 100%;
     left: 0px;
     top: 0px;
     background: #C9FFEE;
     border: 2px solid rgba(33, 144, 109, 0.1);
     border-radius: 30px;
     transform: rotate(-2.4deg);
     z-index: 0;
 }

 .step-card-1.yellow {
     overflow: hidden;
     text-align: left;
     box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
     transition: .25s;
     position: relative;
     min-height: 250px;
     box-sizing: border-box;
     width: 100%;
     left: 345px;
     top: 150px;
     background: #fffbef;
     border: 2px solid rgba(33, 144, 109, 0.1);
     border-radius: 30px;
     transform: rotate(2.4deg);
     z-index: 0;
 }

 .step-card-1.pink {
     overflow: hidden;
     text-align: left;
     box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
     transition: .25s;
     position: relative;
     min-height: 250px;
     box-sizing: border-box;
     width: 100%;
     left: 0px;
     top: 100px;
     background: #fcebff;
     border: 2px solid rgba(33, 144, 109, 0.1);
     border-radius: 30px;
     transform: rotate(2.4deg);
     z-index: 0;
 }

 .step-card-1.blue {
     overflow: hidden;
     text-align: left;
     box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
     transition: .25s;
     position: relative;
     min-height: 250px;
     box-sizing: border-box;
     width: 100%;
     left: 345px;
     top: 250px;
     background: #ebf0ff;
     border: 2px solid rgba(33, 144, 109, 0.1);
     border-radius: 30px;
     transform: rotate(-2.4deg);
     z-index: 0;
 }

 .step-step-badge {
     text-transform: uppercase;
     text-align: right;
     font-style: normal;
     font-weight: 600;
     font-size: 60px;
     line-height: 40px;
     color: #ffe2c2;
     transform: rotate(2.4deg);
     position: absolute;
     top: -5px;
     right: 20px;
 }

 .step-step-badge.blue {
     color: #becbe9;
 }

 .step-card-1-text {
     padding: 24px 24px 20px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }

 .step-card-1-text h5 {
     margin-bottom: 8px;
     width: 229px;
     height: 40px;
     font-style: normal;
     font-weight: 700;
     font-size: 21px;
     color: #219039;
     flex: none;
     order: 0;
     align-self: stretch;
     flex-grow: 0;
     margin-bottom: 25px;
 }

 .step-card-1-text.yellow h5 {
     color: #C24B27;
 }

 .step-card-1-text.pink h5 {
     color: #C2279B;
 }

 .step-card-1-text.blue h5 {
     color: #214490;
 }

 .dot-line {
     position: absolute;
     top: 190px;
     left: 380px;
     z-index: 99;
 }

 .dot-line img {
     width: 80%;
 }

 .mt-200 {
     margin-top: 300px;
 }