Shop
:root {
–primary: #FF5E1A;
–primary-light: #FFF3EC;
–secondary: #1D1D1F;
–text-light: #86868B;
–border: #E2E2E7;
–white: #FFFFFF;
–progress-bg: #FCD9C3;
–progress-active: #FF7F2A;
–input-bg: #F5F5F7;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Inter’, -apple-system, BlinkMacSystemFont, sans-serif;
}
body {
background: var(–white);
color: var(–secondary);
min-height: 100vh;
display: flex;
flex-direction: column;
}
.action-btn {
background: none;
border: none;
color: var(–text-light);
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
}
.login-btn {
background: none;
border: none;
font-size: 14px;
font-weight: 500;
color: var(–secondary);
cursor: pointer;
padding: 8px 12px;
border-radius: 8px;
transition: background-color 0.2s;
}
.login-btn:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.country-badge {
background-color: var(–input-bg);
padding: 6px 12px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
}
.progress-container {
height: 6px;
background: var(–progress-bg);
position: relative;
margin: 0 24px;
overflow: hidden;
}
.progress-bar {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: var(–progress-active);
width: 33%;
transition: width 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.container {
flex: 1;
padding: 40px 24px;
max-width: 600px;
margin: 0 auto;
width: 100%;
display: flex;
flex-direction: column;
}
h1 {
font-size: 28px;
font-weight: 700;
margin-bottom: 32px;
text-align: center;
}
/* Goal Selection Styles */
.options-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
margin-bottom: 40px;
}
.option-card {
background-color: var(–white);
border-radius: 16px;
padding: 24px;
border: 1px solid var(–border);
transition: all 0.3s ease;
cursor: pointer;
text-align: center;
}
.option-card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
border-color: var(–primary);
}
.option-card.active {
border-color: var(–primary);
background-color: var(–primary-light);
}
.option-icon {
width: 72px;
height: 72px;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(–primary-light);
border-radius: 50%;
color: var(–primary);
font-size: 32px;
}
.option-card h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
color: var(–secondary);
}
.option-card p {
font-size: 14px;
color: var(–text-light);
line-height: 1.5;
}
/* Gender Selection Styles */
.gender-options {
display: flex;
gap: 20px;
justify-content: center;
margin-bottom: 40px;
flex-wrap: wrap;
}
.gender-card {
background: var(–primary-light);
border-radius: 16px;
padding: 32px 24px;
text-align: center;
width: 160px;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
}
.gender-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(255, 94, 26, 0.1);
}
.gender-card.active {
border-color: var(–primary);
background-color: rgba(255, 94, 26, 0.08);
}
.gender-icon {
width: 80px;
height: 80px;
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(–white);
border-radius: 50%;
color: var(–primary);
font-size: 36px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* Profile Form Styles */
.profile-form {
display: flex;
flex-direction: column;
gap: 24px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group label {
font-size: 14px;
font-weight: 500;
color: var(–secondary);
}
.form-group input,
.form-group select {
padding: 16px;
font-size: 16px;
border: 1px solid var(–border);
border-radius: 12px;
background-color: var(–input-bg);
transition: all 0.2s;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: var(–primary);
background-color: var(–white);
box-shadow: 0 0 0 2px rgba(255, 94, 26, 0.2);
}
.unit-toggle {
display: flex;
gap: 8px;
margin-top: 8px;
}
.unit-toggle input[type=”radio”] {
display: none;
}
.unit-toggle label {
flex: 1;
padding: 12px;
text-align: center;
border-radius: 8px;
background-color: var(–input-bg);
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
}
.unit-toggle input[type=”radio”]:checked + label {
background-color: var(–primary);
color: var(–white);
}
/* Common Button Styles */
.continue-btn {
margin-top: 16px;
width: 100%;
padding: 16px;
background-color: var(–secondary);
color: var(–white);
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.continue-btn:hover {
background-color: #000;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.continue-btn.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-btn {
position: absolute;
left: 24px;
top: 24px;
background: none;
border: none;
color: var(–primary);
font-size: 16px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}
.nav-link {
position: fixed;
bottom: 24px;
left: 24px;
color: var(–text-light);
font-size: 14px;
font-weight: 500;
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
}
/* Screen States */
.screen {
display: none;
}
.screen.active {
display: flex;
flex-direction: column;
}
/* Animation */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 0.4s ease-out forwards;
}
@media (max-width: 768px) {
.header-actions {
display: none;
}
h1 {
font-size: 24px;
margin-bottom: 24px;
}
.options-grid, .gender-options {
grid-template-columns: 1fr;
}
.option-card, .gender-card {
width: 100%;
max-width: 280px;
margin: 0 auto;
}
.gender-card {
padding: 24px;
}
.profile-form {
gap: 20px;
}
.form-group input,
.form-group select {
padding: 14px;
}
}
What’s your goal?
Lose weight
Gradually achieve your ideal weight with personalized nutrition plans
Gain muscles
Build lean muscle mass with a balanced diet and exercise plan
Maintain weight
Sustain your current weight with well-structured nutrition guidance
Your gender
Female
Male
Your profile
UAE
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: ‘Segoe UI’, sans-serif;
background: #fff;
color: #000;
overflow-x: hidden;
}
/* Navbar – REMOVED AS REQUESTED */
/* Heading Section */
.container {
max-width: 1300px;
margin: auto;
padding: 40px 20px;
text-align: center;
}
h1 {
font-size: 34px;
font-weight: 600;
}
h1 span {
color: #58b947;
}
.subtitle {
margin-top: 10px;
font-size: 15px;
color: #555;
margin-bottom: 50px;
}
/* Scrollable Cards */
.cards {
display: flex;
gap: 25px;
overflow-x: auto;
padding-bottom: 20px;
scroll-snap-type: x mandatory;
}
.card {
flex: 0 0 auto;
width: 230px;
background: #fff;
border-radius: 18px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
overflow: hidden;
position: relative;
display: flex; /* Use flexbox for vertical alignment */
flex-direction: column; /* Stack children vertically */
justify-content: space-between; /* Push button to the bottom */
scroll-snap-align: start;
}
.card img.hero {
width: 100%;
height: 160px;
object-fit: cover;
border-radius: 18px 18px 0 0;
}
.price-tag {
position: absolute;
background: #a0a0a0;
color: white;
font-size: 11px;
padding: 5px 10px;
border-radius: 6px;
}
.card h3 {
font-size: 15px;
font-weight: 600;
margin: 15px 10px 5px;
}
.card p {
font-size: 13px;
padding: 0 12px;
color: #333;
margin-bottom: 15px;
flex-grow: 1; /* Allow description to take available space */
}
.btn {
margin: 0 auto 20px; /* Center button horizontally and add bottom margin */
padding: 8px 16px;
font-size: 13px;
border: 1px solid #333;
border-radius: 20px;
background: none;
cursor: pointer;
transition: all 0.3s ease;
display: block; /* Make button a block element to respect margin: auto */
}
.btn:hover {
background-color: #58b947;
color: white;
border-color: #58b947;
}
/* WhatsApp Floating */
.whatsapp {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
}
.whatsapp img {
width: 55px;
height: 55px;
border-radius: 50%;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
/* Footer */
footer {
margin-top: 60px;
background: #f5f5f5;
padding: 30px;
text-align: center;
font-size: 14px;
color: #444;
}
/* Mobile */
@media (max-width: 768px) {
/* Removed navbar specific rules as navbar is gone */
}
Healthy meal plans by MilletFit
Expertly crafted by dieticians and prepared by specialised chefs to provide fresh, balanced and delicious nutrition.
Starting from AED94/day
Classic Diet
Simple meals made Awesome! Enjoy a Classic diet plan with wholesome global cuisine.
Starting from AED98/day
Indian Fusion Diet Non Vegetarian
Indulge in the flavoursome goodness of Indian spices whilst journeying through rich culinary heritage.
Starting from AED88/day
Indian Fusion Diet Vegetarian
Indulge in the spicy goodness of Indian vegetarian flavours. A fusion meal plan for Indian palate.
Starting from AED111/day
Keto Diet
Stay in ketosis and achieve weight loss faster. Keto plans got your cravings covered without the carbs!
Starting from AED89/day
Vegetarian Diet
Delight in a fibre-rich, wholesome and protein rich vegetarian diet. Perfect for plant-based eaters.
Starting from AED105/day
Gluten & Dairy Free Diet
Enjoy delicious meals free from gluten and dairy, designed for sensitive diets and healthier living.
Starting from AED95/day
Calorie Specific Diet
Precisely portioned meals tailored to your exact caloric needs for effective weight management and fitness goals.
:root {
–primary: #2e7d32;
–primary-light: #e8f5e9;
–primary-dark: #1b5e20;
–secondary: #ff6d00;
–accent: #1565c0;
–text: #263238;
–text-light: #607d8b;
–white: #ffffff;
–gray: #eceff1;
–border-radius: 16px;
–shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
–transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: “Inter”, -apple-system, BlinkMacSystemFont, sans-serif;
background-color: #fafafa;
color: var(–text);
line-height: 1.6;
padding: 0;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 40px 20px;
}
.section-title {
text-align: center;
margin-bottom: 40px;
}
.section-title h2 {
font-size: 36px;
font-weight: 700;
margin-bottom: 16px;
color: var(–text);
}
.section-title p {
font-size: 18px;
color: var(–text-light);
max-width: 700px;
margin: 0 auto;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.card {
background: var(–white);
border-radius: var(–border-radius);
overflow: hidden;
box-shadow: var(–shadow);
transition: var(–transition);
display: flex;
flex-direction: column;
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
.image-wrapper {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
.image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: var(–transition);
}
.card:hover .image-wrapper img {
transform: scale(1.05);
}
.tag {
position: absolute;
top: 16px;
left: 16px;
background-color: var(–primary);
color: var(–white);
font-size: 14px;
font-weight: 600;
line-height: 1.4;
padding: 8px 12px;
border-radius: 8px;
text-align: left;
z-index: 2;
}
.tag.secondary {
background-color: var(–secondary);
}
.tag.accent {
background-color: var(–accent);
}
.content {
padding: 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.title {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
color: var(–text);
}
.description {
font-size: 14px;
color: var(–text-light);
margin-bottom: 16px;
flex: 1;
}
.price {
font-size: 16px;
font-weight: 700;
color: var(–primary);
margin-bottom: 20px;
}
.order-btn {
display: inline-block;
background-color: var(–primary);
color: var(–white);
padding: 12px 24px;
border-radius: 24px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: var(–transition);
text-align: center;
border: none;
cursor: pointer;
width: 100%;
}
.order-btn:hover {
background-color: var(–primary-dark);
transform: translateY(-2px);
}
.filter-buttons {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.filter-btn {
padding: 10px 20px;
border-radius: 24px;
background-color: var(–white);
color: var(–text);
border: 1px solid var(–gray);
cursor: pointer;
transition: var(–transition);
font-weight: 500;
}
.filter-btn.active,
.filter-btn:hover {
background-color: var(–primary);
color: var(–white);
border-color: var(–primary);
}
@media (max-width: 768px) {
.section-title h2 {
font-size: 28px;
}
.section-title p {
font-size: 16px;
}
.grid {
grid-template-columns: 1fr;
}
}
/* Animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeIn 0.6s ease-out forwards;
}
Our Meal Plans
Choose the perfect plan for your lifestyle and goals
Low Cal
450 calories
Low Calorie Plan
Perfect for weight loss with delicious, portion-controlled meals
from AED 337 per week
ORDER NOW
Lean
600 calories
Lean Plan
Balanced meals to maintain lean muscle while losing fat
from AED 387 per week
ORDER NOW
Muscle Gain
750 calories
Muscle Gain Plan
High-protein meals to support muscle growth and recovery
from AED 412 per week
ORDER NOW
Kids
Kids Plan
Healthy, kid-friendly meals they’ll actually eat
Custom pricing
ORDER NOW
Vegetarian
450-550 calories
Vegetarian Plan
Plant-based meals packed with protein and nutrients
from AED 349 per week
ORDER NOW
Trial Meals
Trial Meals
Try our meals before committing to a full plan
AED 100 for 2 breakfasts & 2 meals
ORDER NOW
Keto
500-600 calories
Keto Plan
Low-carb, high-fat meals to keep you in ketosis
from AED 399 per week
ORDER NOW
Vegan
400-500 calories
Vegan Plan
100% plant-based meals with complete nutrition
from AED 359 per week
ORDER NOW
Paleo
550-650 calories
Paleo Plan
Whole foods based on ancestral human diets
from AED 379 per week
ORDER NOW
Mediterranean
500-600 calories
Mediterranean Plan
Heart-healthy meals inspired by Mediterranean cuisine
from AED 389 per week
ORDER NOW
High Protein
700-800 calories
High Protein Plan
Protein-packed meals to support your active lifestyle
from AED 419 per week
ORDER NOW
Family
Family Plan
Nutritious meals for the whole family
from AED 699 per week
ORDER NOW
Gluten-Free
450-550 calories
Gluten-Free Plan
Delicious meals without gluten-containing ingredients
from AED 369 per week
ORDER NOW
Dairy-Free
450-550 calories
Dairy-Free Plan
All the flavor without any dairy products
from AED 359 per week
ORDER NOW
Athletic
800-900 calories
Athletic Performance
Fuel for serious athletes and active individuals
from AED 449 per week
ORDER NOW
Senior
Senior Plan
Nutrient-dense meals tailored for seniors
from AED 329 per week
ORDER NOW
body {
background-color: #f8f9fa;
font-family: “Segoe UI”, sans-serif;
}
/* Active button styling for the day selector */
.day-btn.active {
background-color: #28a745; /* Green background */
color: white;
border-color: #28a745;
}
.meal-card {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease;
cursor: pointer; /* Indicate clickable */
}
.meal-card:hover {
transform: scale(1.02);
}
.meal-card img {
/* Ensure images are responsive within their card */
width: 100%;
height: 160px; /* Adjusted to 160px for better consistency with common card sizes */
object-fit: cover;
}
.section {
padding: 40px 20px;
max-width: 1300px;
margin: auto;
}
.section-title {
text-align: center;
color: #247a43;
font-size: 24px;
font-weight: bold;
margin-bottom: 30px;
}
/* Meal grid classes are now managed primarily by Bootstrap’s row-cols-* */
.meal-card {
/* This fixed width is applied to the card itself,
but Bootstrap’s col classes will ensure proper distribution
within the row on different screen sizes. */
width: 180px; /* Keeping a defined width for consistency in multi-column layouts */
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
background-color: #fff;
transition: transform 0.2s ease;
text-align: center;
margin: 0 auto; /* Center card within its column if width is less than column space */
}
.meal-card p {
padding: 10px;
font-weight: 600;
font-size: 15px;
}
/* Custom styles for the modal */
.modal-content {
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.modal-header {
border-bottom: none;
}
.modal-title {
font-weight: bold;
color: #247a43;
}
/* Updated modal body for flex display */
.modal-body {
display: flex;
flex-direction: column; /* Stack on small screens */
align-items: center;
text-align: center;
padding: 15px; /* Adjusted padding */
}
@media (min-width: 768px) { /* For medium and larger screens */
.modal-body {
flex-direction: row; /* Side-by-side */
justify-content: center;
gap: 20px; /* Space between image and details */
text-align: left; /* Align text to start */
padding: 25px;
}
}
.modal-body .meal-image-container {
flex-shrink: 0; /* Prevent image from shrinking */
max-width: 100%; /* Default for small screens */
margin-bottom: 15px; /* Space below image on small screens */
}
@media (min-width: 768px) {
.modal-body .meal-image-container {
max-width: 45%; /* Adjust as needed for layout */
margin-bottom: 0; /* No bottom margin when side-by-side */
}
}
.modal-body .meal-image-container img {
width: 100%;
height: auto;
border-radius: 10px;
}
.modal-body .meal-details-container {
flex-grow: 1; /* Allow details to take remaining space */
max-width: 100%; /* Default for small screens */
}
@media (min-width: 768px) {
.modal-body .meal-details-container {
max-width: 50%; /* Adjust as needed for layout */
}
}
.modal-body .detail-item {
margin-bottom: 8px;
}
.modal-body .detail-item strong {
color: #333;
}
/* Styles for the horizontally scrollable day selector */
.day-selector-container {
overflow-x: auto;
white-space: nowrap; /* Keep buttons in a single line */
padding-bottom: 10px; /* Space for scrollbar */
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
scrollbar-width: none; /* Hide scrollbar for Firefox */
-ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
}
.day-selector-container::-webkit-scrollbar {
display: none; /* Hide scrollbar for Chrome, Safari, Opera */
}
.day-selector-container .day-btn {
flex: 0 0 auto; /* Prevent buttons from shrinking */
margin: 0 5px; /* Space between buttons */
width: 80px; /* Fixed width for day buttons */
}
Calories & nutrients are calculated using a professional nutritional software based on a variety of nutrition benchmarks and values and are as accurate at time of writing but subject to change.
**Meal photos represent our Lean portion size.
Breakfast
Main Meal 1
Snack
Main Meal 2
Meal Name
Proteins:
Calories:
Fat:
Carbohydrates:
Allergens:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #fff;
}
.container {
max-width: 1000px;
margin: 20px auto;
padding: 20px;
text-align: center;
}
h1 {
margin-bottom: 5px;
font-size: 24px;
}
h2 {
margin-top: 0;
font-size: 16px;
color: green;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
font-size: 12px;
}
th,
td {
border: 1px solid #ccc;
padding: 8px;
text-align: center;
}
th {
background-color: #f5f5f5;
}
.offer-section {
margin-top: 40px;
background-color: #2b2b2b;
color: white;
padding: 30px 20px;
border-radius: 40px 40px 0 0;
}
.offer-section p {
font-size: 18px;
margin-bottom: 20px;
}
.offer-section .code-box {
display: inline-block;
background-color: #2ab639;
padding: 10px 30px;
border-radius: 50px;
font-size: 20px;
font-weight: bold;
color: white;
}
INDIAN FUSION DIET
NON-VEGETARIAN
| Day | Breakfast | Lunch | Dinner | Snack | Drink |
|---|---|---|---|---|---|
| MONDAY | Poha / Fruit Platter / Boiled Egg (2 whites, 1 yolk) | Chicken Biryani / Tossed Carrot Salad | Fish Fillet Masala / Brown Rice / Cucumber Raita | Chocolate Chip Cake | Lemon, Carrot, Lemon, Apple |
| TUESDAY | Khichdi / Raita / Boiled Egg | Rajma / Brown Rice / Garden Salad | Grilled Chicken / Pulao / Cucumber Raita | Low-fat Muffins | Apple, Carrot, Orange |
| WEDNESDAY | Scrambled Egg Whites / Toast | Jowar Aloo Palak Ki Sabji | Veg Upma / Palak Raita | Oatmeal Chocolate Chip Cookies | Strawberry Juice, Beetroot Juice |
| THURSDAY | Protein Oatmeal / Chai | 1 Cup Masoor Dal / Cucumber Salad | Paneer Tikka / Brown Rice | Fruit Energy Bar | Orange Juice, Carrot Juice |
| FRIDAY | High Protein Methi Chilla | Chicken Tikka Salad | Egg Bhurji / Roti / Salad | Raspberry Protein Muffin | Carrot Juice, Lemon & Lime Water |
| SATURDAY | Avocado Toast / Egg Muffin | High Protein Tofu & Veggie Stir Fry | Spicy Chicken Curry / Sweet Corn Rice | Chocolate Brownie | Fresh Orange Juice |
| SUNDAY | Vegetable Stuffed Paratha / Masala Tea | Masoor Biryani / Cucumber & Beetroot Raita | Malai Kofta / Roti | Dryfruit Almond Bites | Chocolate Peanut Butter Shake |
Got Questions?
Frequently Asked Questions
What is the Keto Meal Plan?
The Keto Meal Plan is designed for individuals following a low-carb, high-fat diet to promote ketosis. This plan focuses on high-fat, moderate-protein foods like avocados, nuts, meats, and dairy substitutes, while minimizing carbohydrates. Enjoy a selection of delicious recipes that support your ketogenic lifestyle and help you stay in fat-burning mode!
Why should I purchase the Keto Meal Plan?
The Keto Meal Plan is specifically designed to support your weight loss goals through a low-carb, high-fat diet that promotes ketosis. By focusing on high-fat, low-carb foods, this plan helps optimize fat burning. We offer customizable portion sizes to suit your individual needs, and our system-generated recommendations will assist you in creating a plan that effectively supports your weight loss journey.
Can I customize the keto diet meal plan?
Yes, of course! You can customize the number of meals per day, deliveries per week, portion size, commitment period and food intolerances as per your liking!
Can I remove some ingredients I’m allergic to or do not prefer?
Yes, of course! We allow you to omit 5 ingredients of your choice!
Which areas do you deliver to in the U.A.E?
We provide our services across Dubai, Abu Dhabi, Sharjah, Ajman, Umm Al Quwain and Ras Al Khaimah!
/* Custom styles for error messages */
.progress-ring {
stroke-dasharray: 251.2;
/* 2π * r (2 * 3.14 * 40) */
stroke-dashoffset: 251.2;
transition: stroke-dashoffset 0.4s ease;
}
.error-text {
color: #e02424;
font-size: 0.875rem;
margin-top: 0.25rem;
}
/* Styling for inputs when they are invalid */
input.invalid-field,
select.invalid-field {
border-color: #ef4444;
/* Red border for invalid fields */
}
body {
font-family: “Inter”, sans-serif;
background-color: #f3f4f6;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.form-container-outer {
max-width: 6xl;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
border-radius: 1.5rem;
/* 24px */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.inner-form-card {
max-width: 500px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
border-radius: 1rem;
/* 16px */
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
padding: 2rem;
position: relative;
/* Ensure inner card is positioned for absolute steps */
min-height: 600px;
/* Adjust as needed to prevent content jump */
}
/* Style for active gender button */
button[data-gender].active {
background-color: #22c55e;
color: white;
border-color: #22c55e;
}
/* Basic styling for +/- buttons and unit toggles */
.quantity-button {
background-color: #d1d5db;
/* Light grey */
color: #374151;
/* Dark grey text */
padding: 0.5rem 1rem;
border-radius: 9999px;
/* Full rounded */
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
min-width: 32px;
/* Ensure buttons are not too small */
display: flex;
justify-content: center;
align-items: center;
}
.quantity-button:hover {
background-color: #9ca3af;
/* Darker grey on hover */
}
.unit-toggle-button {
background-color: #e0f2f7;
/* Light blueish grey for inactive units */
color: #2563eb;
/* Blue text for inactive units */
padding: 0.5rem 1rem;
border-radius: 9999px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
border: 1px solid #bfdbfe;
/* Light blue border */
}
.unit-toggle-button.active {
background-color: #22c55e;
/* Green for active units */
color: white;
border-color: #22c55e;
}
.unit-toggle-button:hover {
background-color: #1e8e3e;
/* Darker green on hover for active */
}
/* Activity Level Card Styles */
.activity-card {
border: 1px solid #d1d5db;
border-radius: 0.75rem;
/* rounded-lg */
padding: 1rem;
display: flex;
align-items: center;
gap: 1rem;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.activity-card.active {
border-color: #22c55e;
background-color: #ecfdf5;
/* green-50 */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.activity-card:hover {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.activity-card-icon {
font-size: 1.5rem;
/* Adjust icon size */
color: #10b981;
/* green-500 */
width: 2.5rem;
/* Fixed width for icon container */
height: 2.5rem;
display: flex;
justify-content: center;
align-items: center;
background-color: #d1fae5;
/* green-100 */
border-radius: 50%;
}
.activity-card.active .activity-card-icon {
color: #15803d;
/* green-700 */
}
/* Meal Plan Results Styling */
.result-box {
background-color: #ecfdf5;
/* green-50 */
border: 1px solid #34d399;
/* green-400 */
border-radius: 0.75rem;
/* rounded-lg */
padding: 1.5rem;
text-align: center;
margin-bottom: 1rem;
}
.result-box h3 {
font-size: 1rem;
color: #065f46;
/* green-800 */
margin-bottom: 0.5rem;
}
.result-box .value {
font-size: 2.5rem;
font-weight: bold;
color: #047857;
/* green-700 */
}
.meal-plan-type {
font-size: 2rem;
font-weight: bold;
color: #047857;
/* green-700 */
margin-top: 0.5rem;
}
.meal-plan-description {
font-size: 0.9rem;
color: #10b981;
/* green-600 */
margin-top: 0.25rem;
}
/* Make the content area for Step 4 scrollable */
#step4 .content-scroll-area {
flex-grow: 1;
/* Allows it to take available space */
overflow-y: auto;
/* Adds scrollbar when content overflows */
max-height: calc(100% – 180px);
/* Adjust based on footer/header height */
padding-right: 0.5rem;
/* Space for scrollbar */
}
/* Ensure the inner-form-card fills height to enable flex-grow for content-scroll-area */
.inner-form-card {
display: flex;
flex-direction: column;
}
#step1Form,
#step2Form,
#step3Form,
#step4Content {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Sticky header styles for the top section */
.sticky-header {
position: sticky;
top: 0;
z-index: 50;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
}
✔Healthy & Affordable
✔Choose Your Meals
✔New Weekly Menu
✔Nutritionist-Created
✔Easy Calorie Tracking
Calorie Calculator
Calorie Calculator
Basic Information
Select Goal
Lose Weight
Maintain Weight
Gain Muscle
2/4
Calorie Calculator
Activity Level
Sedentary
Little to no exercise
Light Activity
Low intensity exercise 1-3 times per week
Moderate Activity
Moderate intensity exercise 3-5 times per week
Very Active
High intensity exercise 6-7 times per week
Extra Active
High intensity exercise daily and/or physical job
3/4
Calorie Calculator
Your Results
Recommended daily calorie intake to achieve your goal
0
The meal plan that will help you achieve your goal
Please note: It is generally not recommended for men
to consume fewer than 1,500 calories per day, or fewer than
1,200 calories per day for women, unless advised by a
healthcare professional. Consuming less than these amounts
may result in insufficient nutrient intake. If you are
pregnant, nursing, or have any medical conditions, consult
your doctor before making significant changes to your diet.
✨ Personalized Meal Plan
<!–
Click below to get a meal plan tailored to your estimated daily calorie needs and goal!
Generate Meal Plan
–>
4/4
Showing all 6 results
