:root {
  --rose: #fc74b8;
  --blush: #f2dfdf;
  --sand: #e7d5a6;
  --mink: #aa9d93;
  --ink: #1e2123;
  --pink: #f4a6cb;
  --dust: #dda2a8;
  --radius: 1rem;
  --shadow: 0 8px 24px rgba(30, 33, 35, 12)
} 

html {
  scroll-behavior: smooth
}

body {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink)
}

.brand-wordmark {
  font-family: 'serif';
  font-size: xx-large;
  font-weight: 700;
  color: var(--ink)
}

.text-rose {
  color: var(--rose) !important
}

.text-ink {
  color: var(--ink) !important
}

.bg-ink {
  background: var(--ink) !important
}

.bg-dust {
  background: var(--dust) !important
}

.bg-sand {
  background: var(--sand) !important
}

.bg-blush {
  background: var(--blush) !important
}

.btn-rose {
  --bs-btn-bg: var(--rose);
  --bs-btn-border-color: var(--rose);
  --bs-btn-hover-bg: #e85ea3;
  --bs-btn-hover-border-color: #e85ea3;



  color: #fff;

}

.btn-ink {
  --bs-btn-bg: var(--ink);
  --bs-btn-border-color: var(--ink);
  --bs-btn-hover-bg: #0f1214;
  --bs-btn-hover-border-color: #0f1214;
  color: #fff
}

.btn-outline-ink {
  --bs-btn-color: var(--ink);
  --bs-btn-border-color: var(--ink);
  --bs-btn-hover-bg: var(--ink);
  --bs-btn-hover-border-color: var(--ink);
  --bs-btn-hover-color: #fff
}

.section-pad {
  padding: 2.5rem 0
}

.section-compact {
  padding: 2.5rem 0
}

.section-title {
  font-weight: 700;
}

.navbar {
  backdrop-filter: saturate(1.2) blur(8px);
  box-shadow: 2px 12px rgba(30, 33, 35, .05)
}


.navbar .nav-link {
  font-weight: 500
}

.hero-section {
  position: relative;
  background: radial-gradient(1280px 400px at -10% -20%, var(--pink) 0%, rgba(244, 166, 203, 0) 60%), radial-gradient(800px 300px at 110% -10%, var(--sand) 0%, rgba(231, 213, 166, 0) 60%), linear-gradient(180deg,
      var(--blush), #fff)
}

.hero-visual {
  max-width: 480px;
  width: 100%;
  filter: drop-shadow(0 16px 30px rgba(30, 33, 35, 15))
}

.hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 40px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(242, 223, 223, .7));
  mask: radial-gradient(60px 20px at 20% 0, #000 98%, transparent 100%), radial-gradient(60px 20px at 40% 0, #000 98%, transparent 100%), radial-gradient(60px 20px at 60% 0, #000 98%, transparent 100%), radial-gradient (60px 20px at 80% 0, #000 98%, transparent 100%)
}

.flavour-card {
  border-radius: var(--radius);
  overflow: hidden
}

.flavour-card .card-img-top {
  height: 220px;
  object-fit: cover
}

.price-tag {
  font-weight: 700;
  color: var(--ink)
}

.badge.bg-rose-soft {
  background: color-mix(in srgb, var(--rose) 0%, white)
}

.cta-strip {
  background: linear-gradient(135deg, var(--sand), var(--pink))
}

.my-background-div {
    /* 1. Set the background image URL */
     /* */

    /* 2. Control image fitting and repetition */
    background-size: cover;      /* Scales the image to cover the entire div */
    background-repeat: no-repeat;  /* Prevents the image from repeating */
    background-position: center;   /* Centers the image within the div */

    /* 3. Ensure the div has a defined height/width so the image is visible */
    height: 500px; /* Adjust as needed */
    width: 100%;

    /* Optional: Fallback color if the image fails to load */
    background-color: #cccccc; /* */
}

.platform-card {
        display: block;
        background: #ffffff;
        border-radius: 20px;
        padding: 30px 20px;
        transition: all 0.3s ease;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        border: 1px solid rgba(0,0,0,0.05);
        height: 100%; /* Ensures all cards are same height */
    }

    /* Hover Effect: Lift Up */
    .platform-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.12);
        border-color: rgba(0,0,0,0.1);
    }

    /* Logo Sizing */
    .platform-logo {
        height: 50px; /* Fixed height for consistency */
        width: auto;
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }

    /* Custom Buttons */
    .btn-zomato {
        background-color: #e23744;
        color: white;
        border: none;
    }
    .btn-zomato:hover {
        background-color: #e23744;
        color: white;
    }

    .btn-swiggy {
        background-color: #ff9933;
        color: white;
        border: none;
    }
    .btn-swiggy:hover {
        background-color: #ff9933;
        color: white;
    }

    .btn-google {
        background-color: #4285F4;
        color: white;
        border: none;
    }
    .btn-google:hover {
        background-color: #5294ff;
        color: white;
    }

.back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  border-radius: 999px;
  width: 48px;
  height: 48px;
  display: none;
  box-shadow: var(--shadow)
}

.back-to-top.show {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.form-control:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0.25rem rgba(252, 116, 184, .25)
}

footer .nav-link {
  opacity: .9
}