/* =====================================================
   NEXORA — Premium Bootstrap 5 Business Theme
   Custom Design System (overrides + extensions)
   ===================================================== */

:root {

    /* Main Brand */
    --primary: #081F3A;         /* Deep Navy */
    --primary-light: #102E52;

    /* Gold Accent */
    --gold: #D9B26D;
    --gold-light: #F2D59A;

    /* Green Accent */
    --green: #8BC53F;
    --green-dark: #6EA32F;

    /* Backgrounds */
    --cream: #F9F6F0;
    --light-bg: #FCFCFC;
    --white: #ffffff;

    /* Text */
    --text-dark: #222222;
    --text-light: #666666;

    /* Borders */
    --border: #E7E3DA;

    /* Shadows */
    --shadow:
        0 10px 30px rgba(0,0,0,0.08);


  /* Color system */
  --n-primary: #155EEF;
  --n-primary-dark: #0E3FB0;
  --n-secondary: #6941C6;
  --n-navy: #0B1437;
  --n-success: #12B76A;
  --n-slate: #667085;
  --n-slate-light: #98A2B3;
  --n-bg: #F7F9FC;
  --n-bg-alt: #EEF2FF;
  --n-border: #E4E7EC;
  --n-white: #FFFFFF;

  /* Gradients */
  --n-gradient-primary: linear-gradient(135deg, #155EEF 0%, #6941C6 100%);
  --n-gradient-soft: linear-gradient(135deg, #EEF2FF 0%, #F4F0FF 100%);
  --n-gradient-dark: linear-gradient(135deg, #0B1437 0%, #1A2456 100%);

  /* Typography */
  --n-font-display: 'Sora', sans-serif;
  --n-font-body: 'Inter', sans-serif;

  /* Spacing rhythm (8px base) */
  --n-space-xs: 0.5rem;
  --n-space-sm: 1rem;
  --n-space-md: 1.5rem;
  --n-space-lg: 2.5rem;
  --n-space-xl: 4rem;
  --n-space-2xl: 6rem;

  /* Radius */
  --n-radius-sm: 8px;
  --n-radius-md: 14px;
  --n-radius-lg: 20px;
  --n-radius-pill: 100px;

  /* Shadows */
  --n-shadow-sm: 0 2px 8px rgba(11, 20, 55, 0.06);
  --n-shadow-md: 0 8px 24px rgba(11, 20, 55, 0.08);
  --n-shadow-lg: 0 20px 48px rgba(11, 20, 55, 0.12);
  --n-shadow-primary: 0 12px 28px rgba(21, 94, 239, 0.25);

  /* Bootstrap overrides */
  --bs-primary: #155EEF;
  --bs-primary-rgb: 21, 94, 239;
  --bs-body-font-family: var(--n-font-body);
  --bs-body-color: var(--n-slate);
  --bs-body-bg: var(--n-white);
}

/* =====================================================
   BASE
   ===================================================== */
html { scroll-behavior: smooth; }

body {
  font-family: var(--n-font-body);
  color: var(--n-slate);
  background-color: var(--n-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.font-display {
  font-family: var(--n-font-display);
  color: var(--n-navy);
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1 { font-weight: 800; }

p { line-height: 1.7; }

a { text-decoration: none; }

.text-primary-custom { color: var(--n-primary) !important; }
.text-slate { color: var(--n-slate) !important; }
.text-navy { color: var(--n-navy) !important; }
.bg-soft { background-color: var(--n-bg) !important; }
.bg-soft-alt { background: var(--n-gradient-soft) !important; }
.bg-navy { background-color: var(--n-navy) !important; }
.bg-gradient-primary { background: var(--n-gradient-primary) !important; }
.bg-gradient-dark { background: var(--n-gradient-dark) !important; }

/* Section spacing rhythm */
.section { padding-top: var(--n-space-2xl); padding-bottom: var(--n-space-2xl); }
.section-sm { padding-top: var(--n-space-xl); padding-bottom: var(--n-space-xl); }

@media (max-width: 767.98px) {
  .section { padding-top: var(--n-space-xl); padding-bottom: var(--n-space-xl); }
  .section-sm { padding-top: var(--n-space-lg); padding-bottom: var(--n-space-lg); }
}

/* Eyebrow label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--n-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--n-primary);
  background: var(--n-bg-alt);
  padding: 0.4rem 1rem;
  border-radius: var(--n-radius-pill);
  margin-bottom: var(--n-space-sm);
}

.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--n-primary);
  display: inline-block;
}

.section-title { margin-bottom: var(--n-space-sm); }
.section-subtitle {
  font-size: 1.05rem;
  color: var(--n-slate);
  max-width: 620px;
}
.section-header { margin-bottom: var(--n-space-xl); }

/* =====================================================
   BUTTONS
   ===================================================== */
.btn {
  font-family: var(--n-font-display);
  font-weight: 600;
  border-radius: var(--n-radius-sm);
  padding: 0.75rem 1.75rem;
  font-size: 0.95rem;
  transition: all 0.25s ease;
  border-width: 1.5px;
}

.btn-primary {
  background: var(--n-gradient-primary);
  border: none;
  box-shadow: var(--n-shadow-primary);
  color: #fff;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(21, 94, 239, 0.32);
  color: #fff;
}

.btn-outline-primary {
  border-color: var(--n-primary);
  color: var(--n-primary);
  background: transparent;
}

.btn-outline-primary:hover {
  background: var(--n-primary);
  border-color: var(--n-primary);
  transform: translateY(-2px);
}

.btn-light-custom {
  background: #fff;
  color: var(--n-navy);
  border: 1.5px solid var(--n-border);
}

.btn-light-custom:hover {
  background: var(--n-bg);
  transform: translateY(-2px);
}

.btn-outline-white {
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}

.btn-outline-white:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
  color: #fff;
}

.btn-lg-custom { padding: 1rem 2.25rem; font-size: 1rem; }
.btn-sm-custom { padding: 0.5rem 1.25rem; font-size: 0.85rem; }

/* =====================================================
   NAVBAR
   ===================================================== */
.navbar-nexora {
  padding: 1.25rem 0;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.0);
}

.navbar-nexora.scrolled {
  padding: 0.75rem 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: var(--n-shadow-sm);
}

.navbar-brand-custom {
  font-family: var(--n-font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--n-navy) !important;
  letter-spacing: -0.02em;
}

.navbar-brand-custom span { color: var(--n-primary); }

.navbar-nexora .nav-link {
  font-family: var(--n-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: rgb(152, 119, 119) !important;
  padding: 0.5rem 1.1rem !important;
  border-radius: var(--n-radius-sm);
  transition: all 0.2s ease;
}

.nav2{
  color: yellow !important;;
}
.navbar-nexora .nav-link:hover,
.navbar-nexora .nav-link.active {
  color: rgb(15, 15, 64) !important;
  background: var(--n-bg-alt);
}

.navbar-toggler-custom {
  border: none;
  width: 44px;
  height: 44px;
  border-radius: var(--n-radius-sm);
  background: var(--n-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
  padding: 0;
}

.navbar-toggler-custom .bar {
  width: 20px;
  height: 2px;
  background: var(--n-navy);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.navbar-toggler-custom.active .bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.navbar-toggler-custom.active .bar:nth-child(2) { opacity: 0; }
.navbar-toggler-custom.active .bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* =====================================================
   HERO
   ===================================================== */
.hero {
  position: relative;
  padding-top: 9rem;
  padding-bottom: 5rem;
  background: var(--n-gradient-soft);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -150px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(105,65,198,0.14) 0%, rgba(21,94,239,0.06) 60%, transparent 100%);
  z-index: 0;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -200px;
  left: -150px;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21,94,239,0.10) 0%, transparent 70%);
  z-index: 0;
}

.hero-content { position: relative; z-index: 2; }

.hero h1 { font-size: 3.25rem; line-height: 1.15; }

@media (max-width: 991.98px) {
  .hero { padding-top: 7rem; text-align: center; }
  .hero h1 { font-size: 2.4rem; }
}

@media (max-width: 575.98px) {
  .hero h1 { font-size: 2rem; }
}

/* Hero visual / dashboard mock card */
.hero-visual {
  position: relative;
  z-index: 1;
}

.hero-mock-card {
  background: #fff;
  border-radius: var(--n-radius-lg);
  box-shadow: var(--n-shadow-lg);
  padding: var(--n-space-md);
  border: 1px solid var(--n-border);
  position: relative;
}

.hero-mock-card .mock-bar {
  height: 10px;
  border-radius: var(--n-radius-pill);
  background: var(--n-bg-alt);
  margin-bottom: 0.75rem;
}

.hero-float-badge {
  position: absolute;
  background: #fff;
  border-radius: var(--n-radius-md);
  box-shadow: var(--n-shadow-md);
  padding: 0.9rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--n-font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--n-navy);
  z-index: 3;
}

.hero-float-badge.badge-1 { top: -1.5rem; left: -1.5rem; }
.hero-float-badge.badge-2 { bottom: -1.5rem; right: -1.5rem; }

.hero-float-badge .icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (max-width: 767.98px) {
  .hero-float-badge { padding: 0.6rem 0.9rem; font-size: 0.75rem; }
  .hero-float-badge.badge-1 { top: -1rem; left: -0.5rem; }
  .hero-float-badge.badge-2 { bottom: -1rem; right: -0.5rem; }
}

/* Stats strip */
.stats-strip {
  border-top: 1px solid var(--n-border);
  border-bottom: 1px solid var(--n-border);
}

.stat-item .stat-number {
  font-family: var(--n-font-display);
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--n-navy);
}

.stat-item .stat-label {
  font-size: 0.9rem;
  color: var(--n-slate);
  font-weight: 500;
}

/* =====================================================
   ICON BOXES
   ===================================================== */
.icon-box {
  width: 56px;
  height: 56px;
  border-radius: var(--n-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.icon-box-primary { background: var(--n-bg-alt); color: var(--n-primary); }
.icon-box-secondary { background: #F4F0FF; color: var(--n-secondary); }
.icon-box-success { background: #E7F9F0; color: var(--n-success); }

.icon-box-lg { width: 72px; height: 72px; font-size: 2rem; border-radius: var(--n-radius-md); }

.icon-box-white {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

/* =====================================================
   CARDS — premium card system
   ===================================================== */
.card-premium {
  background: #fff;
  border: 1px solid var(--n-border);
  border-radius: var(--n-radius-md);
  box-shadow: var(--n-shadow-sm);
  transition: all 0.3s ease;
  padding: var(--n-space-lg);
  height: 100%;
}

.card-premium:hover {
  box-shadow: var(--n-shadow-md);
  transform: translateY(-6px);
  border-color: transparent;
}

.card-premium .card-title {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.card-link-arrow {
  font-family: var(--n-font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--n-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap 0.2s ease;
}

.card-link-arrow:hover { gap: 0.7rem; color: var(--n-primary-dark); }

/* Pricing card */
.pricing-card {
  background: #fff;
  border: 1px solid var(--n-border);
  border-radius: var(--n-radius-lg);
  padding: var(--n-space-lg);
  box-shadow: var(--n-shadow-sm);
  transition: all 0.3s ease;
  height: 100%;
  position: relative;
}

.pricing-card:hover { box-shadow: var(--n-shadow-md); transform: translateY(-6px); }

.pricing-card.featured {
  background: var(--n-gradient-dark);
  border: none;
  color: #fff;
  box-shadow: var(--n-shadow-lg);
  transform: scale(1.03);
}

.pricing-card.featured .price, .pricing-card.featured h3 { color: #fff; }
.pricing-card.featured .text-slate { color: rgba(255,255,255,0.65) !important; }
.pricing-card.featured ul li { color: rgba(255,255,255,0.85); }
.pricing-card.featured .pricing-divider { border-color: rgba(255,255,255,0.12); }

@media (max-width: 991.98px) {
  .pricing-card.featured { transform: none; }
}

.pricing-badge {
  position: absolute;
  top: -14px;
  right: 2rem;
  background: var(--n-gradient-primary);
  color: #fff;
  font-family: var(--n-font-display);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.4rem 1rem;
  border-radius: var(--n-radius-pill);
  letter-spacing: 0.05em;
}

.price {
  font-family: var(--n-font-display);
  font-size: 3rem;
  font-weight: 800;
  color: var(--n-navy);
}

.price-period { font-size: 1rem; font-weight: 500; color: var(--n-slate); }

.pricing-divider { border-color: var(--n-border); margin: var(--n-space-md) 0; }

.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  color: var(--n-slate);
}

.feature-list li i { color: var(--n-success); margin-top: 0.2rem; flex-shrink: 0; }
.feature-list li.disabled { opacity: 0.45; }
.feature-list li.disabled i { color: var(--n-slate-light); }

/* Blog cards */
.blog-card-img {
  border-radius: var(--n-radius-md) var(--n-radius-md) 0 0;
  overflow: hidden;
  aspect-ratio: 16/10;
}

.blog-card-img img { transition: transform 0.4s ease; width: 100%; height: 100%; object-fit: cover; }
.card-premium:hover .blog-card-img img { transform: scale(1.06); }

.blog-card-body { padding: var(--n-space-md) var(--n-space-md) 0; }

.tag-pill {
  display: inline-block;
  font-family: var(--n-font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--n-primary);
  background: var(--n-bg-alt);
  padding: 0.3rem 0.8rem;
  border-radius: var(--n-radius-pill);
  margin-bottom: 0.75rem;
}

.meta-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--n-slate-light);
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--n-border);
}

/* Portfolio card */
.portfolio-card {
  position: relative;
  border-radius: var(--n-radius-md);
  overflow: hidden;
  box-shadow: var(--n-shadow-sm);
  aspect-ratio: 4/3;
}

.portfolio-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }

.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,20,55,0) 30%, rgba(11,20,55,0.88) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--n-space-md);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.portfolio-card:hover .portfolio-overlay { opacity: 1; }
.portfolio-card:hover img { transform: scale(1.08); }

.portfolio-overlay h5 { color: #fff; margin-bottom: 0.25rem; }
.portfolio-overlay span { color: rgba(255,255,255,0.7); font-size: 0.85rem; }

/* Testimonial card */
.testimonial-card {
  background: #fff;
  border-radius: var(--n-radius-md);
  box-shadow: var(--n-shadow-sm);
  border: 1px solid var(--n-border);
  padding: var(--n-space-lg);
  height: 100%;
}

.testimonial-card .stars { color: #FFB400; letter-spacing: 0.15em; font-size: 0.9rem; margin-bottom: 1rem; }

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: var(--n-space-md);
}

.testimonial-author img {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
}

.testimonial-author .name { font-family: var(--n-font-display); font-weight: 700; color: var(--n-navy); font-size: 0.95rem; }
.testimonial-author .role { font-size: 0.8rem; color: var(--n-slate-light); }

/* Process steps (numbered — real sequence) */
.process-step {
  position: relative;
  padding-left: 0;
}

.process-number {
  font-family: var(--n-font-display);
  font-size: 3rem;
  font-weight: 800;
  background: var(--n-gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1;
  margin-bottom: 1rem;
  display: block;
}

/* Logo cloud */
.logo-cloud-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--n-font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--n-slate-light);
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.logo-cloud-item:hover { opacity: 1; color: var(--n-navy); }

/* =====================================================
   FORMS
   ===================================================== */
.form-control,
.form-select {
  border: 1.5px solid var(--n-border);
  border-radius: var(--n-radius-sm);
  /* padding: 0.85rem 1.1rem; */
  font-size: 0.95rem;
  background-color: var(--n-bg);
  transition: all 0.2s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--n-primary);
  box-shadow: 0 0 0 4px rgba(21, 94, 239, 0.1);
  background-color: #fff;
}

.form-label {
  font-family: var(--n-font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--n-navy);
  margin-bottom: 0.5rem;
}

.form-control.is-invalid, .form-select.is-invalid { border-color: #DC3545; }
.form-control.is-valid, .form-select.is-valid { border-color: var(--n-success); }

/* Newsletter / CTA section */
.cta-section {
  background: var(--n-gradient-dark);
  border-radius: var(--n-radius-lg);
  padding: var(--n-space-2xl) var(--n-space-lg);
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21,94,239,0.25) 0%, transparent 70%);
}

.cta-section h2, .cta-section p { color: #fff; position: relative; z-index: 1; }
.cta-section p { color: rgba(255,255,255,0.7); }

/* =====================================================
   FOOTER
   ===================================================== */
.footer-nexora {
  background: var(--n-navy);
  color: rgba(255,255,255,0.65);
  padding-top: var(--n-space-2xl);
}

.footer-nexora h6 {
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--n-space-md);
}

.footer-nexora a {
  color: rgba(255,255,255,0.6);
  transition: color 0.2s ease;
  display: block;
  margin-bottom: 0.65rem;
  font-size: 0.95rem;
}

.footer-nexora a:hover { color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: var(--n-space-xl);
  padding: var(--n-space-md) 0;
  font-size: 0.85rem;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  transition: all 0.2s ease;
  margin-bottom: 0 !important;
}

.social-icon:hover { background: var(--n-primary); transform: translateY(-3px); }

/* =====================================================
   PAGE HEADER (sub-pages)
   ===================================================== */
.page-header {
  background: var(--n-gradient-dark);
  padding: 8rem 0 4rem;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.page-header::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21,94,239,0.25) 0%, transparent 70%);
}

.page-header h1 { color: #fff; }

.breadcrumb-custom {
  display: inline-flex;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
}

.breadcrumb-custom a { color: rgba(255,255,255,0.6); }
.breadcrumb-custom a:hover { color: #fff; }
.breadcrumb-custom .active { color: var(--n-primary); }

/* =====================================================
   SCROLL REVEAL (lightweight)
   ===================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .card-premium:hover, .pricing-card:hover, .btn:hover, .portfolio-card img { transform: none; }
}

/* =====================================================
   MISC UTILITIES
   ===================================================== */
.divider-line { height: 1px; background: var(--n-border); border: none; }

.rounded-img { border-radius: var(--n-radius-lg); }

.badge-soft {
  background: var(--n-bg-alt);
  color: var(--n-primary);
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: var(--n-radius-pill);
  font-size: 0.8rem;
}

.list-check {
  list-style: none;
  padding: 0;
}

.list-check li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.list-check li i {
  color: var(--n-primary);
  background: var(--n-bg-alt);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* Author / sidebar widgets (blog details) */
.widget {
  background: #fff;
  border: 1px solid var(--n-border);
  border-radius: var(--n-radius-md);
  padding: var(--n-space-md);
  margin-bottom: var(--n-space-md);
}

.widget h5 { font-size: 1rem; margin-bottom: var(--n-space-sm); }

.widget-link-list { list-style: none; padding: 0; margin: 0; }
.widget-link-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--n-border);
  font-size: 0.9rem;
  color: var(--n-navy);
  font-weight: 500;
}
.widget-link-list li:last-child { border-bottom: none; }
.widget-link-list li span { color: var(--n-slate-light); font-weight: 400; }

/* FAQ accordion custom */
.accordion-custom .accordion-item {
  border: 1px solid var(--n-border);
  border-radius: var(--n-radius-sm) !important;
  margin-bottom: 1rem;
  overflow: hidden;
}

.accordion-custom .accordion-button {
  font-family: var(--n-font-display);
  font-weight: 700;
  color: var(--n-navy);
  background: #fff;
  padding: 1.25rem 1.5rem;
}

.accordion-custom .accordion-button:not(.collapsed) {
  color: var(--n-primary);
  background: var(--n-bg-alt);
  box-shadow: none;
}

.accordion-custom .accordion-button:focus { box-shadow: none; border-color: var(--n-border); }
.accordion-custom .accordion-body { padding: 1.25rem 1.5rem; color: var(--n-slate); }

/* Back to top */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--n-gradient-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--n-shadow-primary);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 999;
  border: none;
}

.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* Contact map placeholder */
.map-frame {
  border-radius: var(--n-radius-md);
  overflow: hidden;
  border: 1px solid var(--n-border);
  height: 50%;
  min-height: 320px;
}

.map-frame iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* Service detail icon list */
.feature-grid-item {
  display: flex;
  gap: 1rem;
  padding: var(--n-space-md);
  background: var(--n-bg);
  border-radius: var(--n-radius-md);
  height: 100%;
}


/* =========================================================
   369 FOOD COMPANY - NAVBAR
   ========================================================= */

.food369-header {
    position: relative;
    z-index: 1050;
    width: 100%;
}

.food369-navbar {
    min-height: 68px;
    padding: 7px 0;
    background: #062442;
    border-bottom: 2px solid #c9a24a;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.12);
}

/* ---------------------------------------------------------
   LOGO
   --------------------------------------------------------- */

.food369-logo {
    display: flex;
    align-items: center;
    /* width: 245px; */
    padding: 0;
    margin-right: 25px;
}

.food369-logo img {
    display: block;
    /* width: 225px; */
    height: 120px;
    /* max-height: 54px; */
    object-fit: contain;
    object-position: left center;
}

/* ---------------------------------------------------------
   MAIN MENU
   --------------------------------------------------------- */

.food369-menu {
    display: flex;
    align-items: center;
    gap: 3px;
}

.food369-menu .nav-item {
    position: relative;
}

.food369-menu .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 11px !important;

    color: #ffffff !important;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.15px;

    white-space: nowrap;
    transition: all 0.25s ease;
}

.food369-menu .nav-link:hover,
.food369-menu .nav-link:focus {
    color: #e0bd67 !important;
}

/* Bootstrap dropdown arrow */
.food369-menu .dropdown-toggle::after {
    margin-left: 3px;
    vertical-align: middle;

    border-top: 4px solid currentColor;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* ---------------------------------------------------------
   DROPDOWN
   --------------------------------------------------------- */

.food369-dropdown {
    min-width: 190px;
    /* margin-top: 8px !important; */
    padding: 8px 0;

    background: #ffffff;
    border: 1px solid rgba(201, 162, 74, 0.35);
    border-radius: 3px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
}

.food369-dropdown .dropdown-item {
    padding: 9px 17px;

    color: #062442;
    font-size: 12px;
    font-weight: 500;

    transition: all 0.2s ease;
}

.food369-dropdown .dropdown-item:hover,
.food369-dropdown .dropdown-item:focus {
    color: #ffffff;
    background: #062442;
}

/* ---------------------------------------------------------
   RIGHT SIDE
   --------------------------------------------------------- */

.food369-nav-right {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: 15px;
}

/* ---------------------------------------------------------
   SEARCH
   --------------------------------------------------------- */

.food369-search {
    position: relative;

    display: flex;
    align-items: center;

    width: 176px;
    height: 36px;

    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
}

.food369-search > i {
    margin-left: 13px;
    color: #53606b;
    font-size: 12px;
}

.food369-search input {
    width: 100%;
    height: 100%;
    padding: 0 8px;

    border: 0;
    outline: 0;

    color: #172b3d;
    background: transparent;

    font-family: inherit;
    font-size: 10px;
}

.food369-search input::placeholder {
    color: #68737c;
    opacity: 1;
}

.food369-search button {
    display: none;
}

/* ---------------------------------------------------------
   ACCOUNT
   --------------------------------------------------------- */

.food369-account {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #ffffff !important;
    text-decoration: none;

    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;

    transition: color 0.25s ease;
}

.food369-account i {
    font-size: 17px;
}

.food369-account:hover {
    color: #e0bd67 !important;
}

/* ---------------------------------------------------------
   CART
   --------------------------------------------------------- */

.food369-cart {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 31px;
    height: 38px;

    color: #ffffff !important;
    text-decoration: none;

    transition: color 0.25s ease;
}

.food369-cart > i {
    font-size: 18px;
}

.food369-cart:hover {
    color: #e0bd67 !important;
}

.food369-cart-count {
    position: absolute;
    top: -1px;
    right: -4px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 17px;
    height: 17px;

    color: #062442;
    background: #d7aa4d;

    border-radius: 50%;

    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

/* ---------------------------------------------------------
   MOBILE TOGGLE
   --------------------------------------------------------- */

.food369-toggler {
    width: 42px;
    height: 38px;
    padding: 7px 6px;

    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 4px;

    box-shadow: none !important;
}

.food369-toggler span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 4px auto;

    background: #ffffff;
    border-radius: 2px;

    transition: all 0.25s ease;
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1199.98px) {

    .food369-logo {
        width: 205px;
        margin-right: 10px;
    }

    .food369-logo img {
        width: 190px;
    }

    .food369-menu .nav-link {
        padding-left: 7px !important;
        padding-right: 7px !important;
        font-size: 11px;
    }

    .food369-nav-right {
        gap: 10px;
        margin-left: 8px;
    }

    .food369-search {
        width: 155px;
    }

}

/* ---------------------------------------------------------
   MOBILE / COLLAPSED NAVBAR
   --------------------------------------------------------- */

@media (max-width: 991.98px) {

    .food369-navbar {
        min-height: 65px;
        padding: 8px 0;
    }

    .food369-logo {
        width: 210px;
        margin-right: 0;
    }

    .food369-logo img {
        /* width: 195px; */
        /* max-height: 50px; */
    }

    .food369-toggler {
        margin-left: auto;
    }

    .food369-navbar .navbar-collapse {
        margin-top: 10px;
        padding: 15px;

        background: #062442;
        border-top: 1px solid rgba(201, 162, 74, 0.35);
    }

    .food369-menu {
        display: block;
        margin: 0 !important;
    }

    .food369-menu .nav-link {
        justify-content: space-between;
        padding: 12px 4px !important;

        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 13px;
    }

    .food369-dropdown {
        position: static !important;
        width: 100%;
        margin: 3px 0 5px !important;

        border: 0;
        border-radius: 2px;
        box-shadow: none;
    }

    .food369-dropdown .dropdown-item {
        padding: 10px 15px;
        font-size: 12px;
    }

    .food369-nav-right {
        display: flex;
        flex-wrap: wrap;
        margin: 15px 0 0;
        padding-top: 15px;

        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .food369-search {
        flex: 1;
        width: auto;
        min-width: 180px;
    }

    .food369-account {
        padding: 8px;
    }

}

/* ---------------------------------------------------------
   SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 575.98px) {

    .food369-navbar {
        padding-left: 5px;
        padding-right: 5px;
    }

    .food369-logo {
        /* width: 175px; */
    }

    .food369-logo img {
        /* width: 165px; */
    }

    .food369-nav-right {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 10px;
        align-items: center;
    }

    .food369-search {
        min-width: 0;
        width: 100%;
    }

    .food369-search input {
        font-size: 9px;
    }

    .food369-account span {
        display: none;
    }

}




/* =========================================================
   HERO BANNER
   ========================================================= */

.hero-banner {
    position: relative;

    width: 100%;
    height: 460px;

    background-image: url("/templates/Default/images/hero-banner.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

    overflow: hidden;
}


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

.hero-banner::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background: linear-gradient(
        90deg,
        rgba(8, 31, 58, 0.48) 0%,
        rgba(8, 31, 58, 0.25) 38%,
        rgba(8, 31, 58, 0.08) 68%,
        rgba(8, 31, 58, 0.15) 100%
    );

    pointer-events: none;
}


/* =========================================================
   BOOTSTRAP CONTAINER
   ========================================================= */

.hero-banner .container {
    position: relative;

    width: 100%;
    height: 100%;

    z-index: 2;
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.hero-content {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 620px;
    max-width: 92%;

    text-align: center;

    z-index: 3;
}


/* =========================================================
   KICKER
   Heavenly Delights
   ========================================================= */

.hero-kicker {
    margin: 0 0 2px;

    color: var(--gold-light);

    font-family: "Playfair Display", Georgia, serif;

    font-size: 44px;
    font-weight: 500;

    line-height: 1;

    letter-spacing: 0;

    text-shadow:
        0 2px 6px rgba(8, 31, 58, 0.65);
}


/* =========================================================
   MAIN TITLE
   Crafted for Every Craving.
   ========================================================= */

.hero-title {
    margin: 0;
    padding: 0;

    color: var(--white);

    font-family: "Playfair Display", Georgia, serif;

    font-size: 44px;
    font-weight: 500;

    line-height: 1;

    letter-spacing: 0;

    text-shadow:
        0 2px 7px rgba(8, 31, 58, 0.75);
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.hero-description {
    max-width: 650px;

    margin: 13px auto 16px;
    padding: 0;

    color: var(--white);

    font-family: "Montserrat", Arial, sans-serif;

    font-size: 11px;
    font-weight: 400;

    line-height: 1.5;

    letter-spacing: 0;

    text-shadow:
        0 1px 4px rgba(8, 31, 58, 0.75);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.hero-actions {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 14px;

    margin: 0 0 18px;
}


/* Common button */

.hero-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    width: 210px;
    height: 40px;

    padding: 0 18px;

    border-radius: 5px;

    font-family: "Montserrat", Arial, sans-serif;

    font-size: 9px;
    font-weight: 700;

    line-height: 1;
    letter-spacing: 0.4px;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


/* Button icon */

.hero-btn i {
    font-size: 10px;

    transition: transform 0.25s ease;
}


.hero-btn:hover i {
    transform: translateX(4px);
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.hero-btn-primary {
    color: var(--primary);

    background-color: var(--gold);

    border: 1px solid var(--gold);

    box-shadow: var(--shadow);
}


.hero-btn-primary:hover {
    color: var(--primary);

    background-color: var(--gold-light);

    border-color: var(--gold-light);

    transform: translateY(-1px);
}


/* =========================================================
   SECONDARY BUTTON
   ========================================================= */

.hero-btn-outline {
    color: var(--white);

    background-color: rgba(8, 31, 58, 0.20);

    border: 1px solid var(--gold);
}


.hero-btn-outline:hover {
    color: var(--primary);

    background-color: var(--white);

    border-color: var(--white);

    transform: translateY(-1px);
}


/* =========================================================
   FEATURES
   ========================================================= */

.hero-features {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 27px;

    width: 100%;

    padding-top: 10px;

    border-top: 1px solid rgba(242, 213, 154, 0.40);
}


/* =========================================================
   FEATURE ITEM
   ========================================================= */

.hero-feature {
    display: flex;

    align-items: center;

    gap: 7px;

    color: var(--white);

    font-family: "Montserrat", Arial, sans-serif;

    font-size: 7px;
    font-weight: 500;

    line-height: 1.25;

    text-align: left;

    white-space: nowrap;

    text-shadow:
        0 1px 3px rgba(8, 31, 58, 0.70);
}


/* =========================================================
   FEATURE ICON
   ========================================================= */

.hero-feature i {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    color: var(--gold-light);

    font-size: 9px;

    border: 1px solid var(--gold);

    border-radius: 50%;

    background-color: rgba(8, 31, 58, 0.15);
}


/* =========================================================
   LARGE TABLET
   ========================================================= */

@media (max-width: 1199.98px) {

    .hero-banner {
        height: 440px;
    }

    .hero-content {
        width: 680px;
    }

    .hero-kicker {
        font-size: 42px;
    }

    .hero-title {
        font-size: 42px;
    }

    .hero-description {
        font-size: 11px;
    }

    .hero-features {
width: 73%;
  padding-top: 10px;
  border-top: 1px solid rgba(242, 213, 154, 0.40);
  margin-left: auto;
  margin-right: auto;

    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .hero-banner {
        height: 420px;
    }

    .hero-content {
        width: 640px;
    }

    .hero-kicker {
        font-size: 38px;
    }

    .hero-title {
        font-size: 38px;
    }

    .hero-description {
        margin-top: 11px;
        margin-bottom: 14px;

        font-size: 10px;
    }

    .hero-btn {
        width: 190px;
        height: 38px;
    }

    .hero-features {
        gap: 16px;
    }

    .hero-feature {
        font-size: 6.5px;
    }

    .hero-feature i {
        width: 23px;
        height: 23px;

        flex-basis: 23px;

        font-size: 8px;
    }
}


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

@media (max-width: 767.98px) {

    .hero-banner {
        height: 500px;

        background-position: 62% center;
    }


    .hero-banner::after {
        background: linear-gradient(
            90deg,
            rgba(8, 31, 58, 0.68) 0%,
            rgba(8, 31, 58, 0.45) 50%,
            rgba(8, 31, 58, 0.25) 100%
        );
    }


    .hero-content {
        width: calc(100% - 30px);
        max-width: 500px;
    }


    .hero-kicker {
        font-size: 34px;
    }


    .hero-title {
        font-size: 34px;
    }


    .hero-description {
        max-width: 430px;

        margin-top: 12px;
        margin-bottom: 15px;

        font-size: 10px;

        line-height: 1.5;
    }


    .desktop-break {
        display: none;
    }


    .hero-actions {
        gap: 8px;

        margin-bottom: 15px;
    }


    .hero-btn {
        width: 175px;
        height: 36px;

        padding: 0 12px;

        gap: 8px;

        font-size: 8px;
    }


    .hero-btn i {
        font-size: 9px;
    }


    .hero-features {
        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 10px 14px;

        padding-top: 10px;
    }


    .hero-feature {
        font-size: 7px;
    }


    .hero-feature i {
        width: 23px;
        height: 23px;

        flex-basis: 23px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .hero-banner {
        height: 510px;

        background-position: 3% center;
    }


    .hero-content {
        width: calc(100% - 24px);
    }


    .hero-kicker {
        font-size: 29px;
    }


    .hero-title {
        font-size: 30px;
    }


    .hero-description {
        font-size: 9px;

        margin-top: 10px;
        margin-bottom: 13px;
    }


    .hero-actions {
        flex-direction: column;

        gap: 7px;
    }


    .hero-btn {
        width: 200px;

        height: 36px;
    }


    .hero-features {
        grid-template-columns: 1fr 1fr;

        gap: 9px 12px;
    }


    .hero-feature {
        font-size:10.5px;
    }


    .hero-feature i {
       width: 65px;
    height: 35px;
    font-size: 14px;
    flex-basis: 35px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .hero-banner {
        height: 500px;
    }


    .hero-kicker {
        font-size: 26px;
    }


    .hero-title {
        font-size: 27px;
    }


    .hero-description {
        font-size: 8.5px;
    }


    .hero-btn {
        width: 185px;
    }
}


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

.craved-section {
    width: 100%;
    padding: 60px 0 70px;
    background: var(--white);
}


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

.craved-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}


/* =========================================================
   HEADING
========================================================= */

.craved-heading {
    flex-shrink: 0;
}

.craved-heading h2 {
    margin: 0;
    color: var(--primary);

    font-family: "Playfair Display", Georgia, serif;

    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
}

.craved-heading p {
    margin: 8px 0 0;

    color: var(--text-light);

    font-family: "Montserrat", Arial, sans-serif;

    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   TABS
========================================================= */

.craved-tabs-area {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;

    min-width: 0;
}

.craved-tabs {
    display: flex;
    align-items: center;
    gap: 6px;

    white-space: nowrap;
}

.craved-tab {
    height: 38px;

    padding: 0 17px;

    border: 1px solid transparent;
    border-radius: 30px;

    background: transparent;

    color: var(--text-dark);

    font-family: "Montserrat", Arial, sans-serif;

    font-size: 13px;
    font-weight: 500;

    cursor: pointer;

    transition: all .25s ease;
}

.craved-tab:hover {
    background: var(--cream);
}

.craved-tab.active {
    background: var(--primary);
    color: var(--white);

    box-shadow: 0 4px 12px rgba(8, 31, 58, .18);
}


/* =========================================================
   VIEW ALL
========================================================= */

.craved-view-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: var(--primary);

    font-family: "Montserrat", Arial, sans-serif;

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;
}


/* =========================================================
   CAROUSEL
========================================================= */

.craved-carousel {
    position: relative;
    width: 100%;
}


/*
    IMPORTANT:
    The viewport has the actual width.
*/

.craved-viewport {
    width: 100%;
    overflow: hidden;
}


/*
    IMPORTANT:
    Do NOT use width:max-content here.
*/

.craved-track {
    display: flex;

    gap: 18px;

    width: max-content;

    transition: transform .4s ease;

    will-change: transform;
}


/* =========================================================
   PRODUCT CARD

   WIDTH IS SET BY JAVASCRIPT BASED ON VIEWPORT.
   This prevents the tiny-card problem.
========================================================= */

.product-card {

    flex: 0 0 auto;

    box-sizing: border-box;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 8px;

    overflow: hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.product-image-wrap {
    position: relative;

    width: 100%;

    aspect-ratio: 1 / .90;

    background: var(--cream);

    overflow: hidden;
}


.product-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   WISHLIST
========================================================= */

.product-wishlist {
    position: absolute;

    top: 10px;
    right: 10px;

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: var(--white);

    color: var(--text-light);

    cursor: pointer;

    z-index: 2;

    box-shadow: 0 3px 10px rgba(0,0,0,.10);
}


/* =========================================================
   PRODUCT INFO
========================================================= */

.product-info {
    padding: 15px 14px 16px;
}


/* BRAND */

.product-brand {
    margin-bottom: 5px;

    color: var(--primary);

    font-family: "Montserrat", Arial, sans-serif;

    font-size: 12px;
    font-weight: 700;
}


/* NAME */

.product-name {
    height: 42px;

    margin: 0;

    color: var(--text-dark);

    font-family: "Montserrat", Arial, sans-serif;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.45;

    overflow: hidden;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* WEIGHT */

.product-weight {
    margin-top: 6px;

    color: var(--text-light);

    font-family: "Montserrat", Arial, sans-serif;

    font-size: 12px;
}


/* =========================================================
   RATING
========================================================= */

.product-rating {
    display: flex;
    align-items: center;
    gap: 5px;

    margin-top: 8px;

    font-family: "Montserrat", Arial, sans-serif;

    font-size: 11px;
}

.stars {
    color: var(--gold);
    font-size: 12px;
}

.rating-count {
    color: var(--text-light);
}


/* =========================================================
   PRODUCT BOTTOM
========================================================= */

.product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-top: 14px;
}


/* PRICE */

.product-price {
    color: var(--primary);

    font-family: "Montserrat", Arial, sans-serif;

    font-size: 18px;
    font-weight: 700;
}


/* ADD */

.product-add {
    height: 36px;

    padding: 0 13px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    background: var(--green);

    border: 1px solid var(--green);

    border-radius: 5px;

    color: var(--white);

    font-family: "Montserrat", Arial, sans-serif;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

.product-add:hover {
    background: var(--green-dark);
    border-color: var(--green-dark);
}


/* =========================================================
   ARROWS
========================================================= */

.craved-arrow {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid var(--border);

    border-radius: 50%;

    background: var(--white);

    color: var(--primary);

    z-index: 5;

    box-shadow: 0 4px 14px rgba(0,0,0,.10);

    cursor: pointer;
}

.craved-arrow:hover {
    background: var(--primary);
    color: var(--white);
}

.craved-arrow:disabled {
    opacity: .3;
    pointer-events: none;
}

.craved-prev {
    left: -20px;
}

.craved-next {
    right: -20px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    .craved-header {
        align-items: center;
        flex-wrap: wrap;
    }

    .craved-tabs-area {
        width: 100%;
        justify-content: space-between;
    }

}


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

@media (max-width: 767px) {

    .craved-section {
        padding: 42px 0 50px;
    }

    .craved-header {
        display: block;
        margin-bottom: 25px;
    }

    .craved-heading h2 {
        font-size: 27px;
    }

    .craved-heading p {
        font-size: 13px;
    }

    .craved-tabs-area {
        display: block;
        margin-top: 20px;
    }

    .craved-tabs {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .craved-tabs::-webkit-scrollbar {
        display: none;
    }

    .craved-tab {
        flex-shrink: 0;
        height: 36px;
        padding: 0 15px;
        font-size: 12px;
    }

    .craved-view-all {
        display: none;
    }

    .craved-prev {
        left: -10px;
    }

    .craved-next {
        right: -10px;
    }

    .product-info {
        padding: 13px 12px 14px;
    }

    .product-name {
        font-size: 13px;
    }

    .product-price {
        font-size: 16px;
    }

    .product-add {
        height: 33px;
        padding: 0 10px;
        font-size: 10px;
    }
}

/* =========================================================
   TWO WORLDS SECTION
========================================================= */

.two-worlds-section {
    width: 100%;
    padding: 20px 0 15px;
    background: var(--white);
}


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

.two-worlds-heading {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 20px;

    margin-bottom: 5px;
}


.two-worlds-heading h2 {
    margin: 0;

    color: var(--primary);

    font-family: "Playfair Display", Georgia, serif;

    font-size: 30px;
    font-weight: 600;

    line-height: 1.2;

    text-transform: uppercase;

    letter-spacing: 2px;
/* 
    white-space: nowrap; */
}


/* GOLD LINES */

.heading-line {
    width: 55px;
    height: 1px;

    background: var(--gold);

    position: relative;
}


/* small diamond */

.heading-line::after {
    content: "";

    position: absolute;

    top: 50%;
    right: -4px;

    width: 7px;
    height: 7px;

    background: var(--gold);

    transform: translateY(-50%) rotate(45deg);
}


/* LEFT LINE */

.heading-line:first-child::after {
    right: auto;
    left: -4px;
}


/* =========================================================
   SUBTITLE
========================================================= */

.two-worlds-subtitle {
    margin: 0 0 28px;

    text-align: center;

    color: var(--text-light);

    font-family: "Montserrat", Arial, sans-serif;

    font-size: 13px;
    font-weight: 400;

    letter-spacing: .3px;
}


/* =========================================================
   BANNERS WRAPPER
========================================================= */

.two-worlds-banners {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1px;

    width: 100%;
}


/* =========================================================
   INDIVIDUAL BANNER
========================================================= */

.world-banner {
    /* position: relative; */

    display: block;

    width: 100%;

    overflow: hidden;

    /* background: var(--cream); */

    text-decoration: none;

    aspect-ratio: 2.15 / 1;

    border-radius: 4px;
}


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

.world-banner img {
    display: block;

    width: 100%;
    /* height: 100%; */

    object-fit: cover;

    transition: transform .5s ease;
}


/* =========================================================
   HOVER
========================================================= */

.world-banner:hover img {
    transform: scale(1.025);
}


/* =========================================================
   VERY SUBTLE OVERLAY
========================================================= */

.world-banner-overlay {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, .03),
        transparent 50%,
        rgba(0, 0, 0, .02)
    );
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .two-worlds-section {
        padding: 50px 0 60px;
    }

    .two-worlds-heading h2 {
        font-size: 26px;
    }

    .heading-line {
        width: 40px;
    }

    .two-worlds-banners {
        gap: 10px;
    }

}


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

@media (max-width: 767px) {

    .two-worlds-section {
        padding: 42px 0 50px;
    }


    .two-worlds-heading {
        gap: 12px;
    }


    .two-worlds-heading h2 {
        font-size: 21px;
    text-align: center;
            letter-spacing: 1.2px;
    }


    .heading-line {
        width: 25px;
    }


    .two-worlds-subtitle {
        font-size: 12px;

        padding: 0 15px;

        margin-bottom: 20px;
    }


    .two-worlds-banners {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .world-banner {
        aspect-ratio: 2.15 / 1;
    }

}


/* =========================================================
   MOMENT SECTION
========================================================= */

.moment-section {
    width: 100%;

    padding: 60px 0 70px;

    background: var(--cream);
}


/* =========================================================
   MAIN GRID
========================================================= */

.moment-grid {

    display: grid;

    /*
        Left  = 40%
        Center = 30%
        Right = 30%
    */

    grid-template-columns:
       
        1fr
        1fr;

    gap: 14px;

    width: 100%;
}


/* =========================================================
   COMMON BOX
========================================================= */

.moment-box {

    position: relative;

    min-width: 0;

    overflow: hidden;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 5px;

    box-sizing: border-box;
}


/* =========================================================
   SHOP BY MOMENT
========================================================= */

.shop-moment-box {

    padding: 0 12px 12px;
}


/* HEADER */

.moment-box-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    padding: 0 2px 12px;
}


.moment-box-header h3 {

    margin: 0;

    color: var(--primary);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 23px;

    font-weight: 700;

    line-height: 1.2;
}


.moment-box-header p {

    margin: 3px 0 0;

    color: #000;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 1.4;
}


/* VIEW ALL */

.moment-view-all {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding-top: 5px;

    color: var(--primary);

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 10px;

    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;
}


.moment-view-all i {

    font-size: 9px;

}


/* =========================================================
   MOMENT CARDS
========================================================= */

.moment-cards {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 7px;
}


.moment-card {

    position: relative;

    display: block;

    overflow: hidden;

    aspect-ratio: .95 / 1;

    border-radius: 4px;

    text-decoration: none;

    background: var(--primary);
}


.moment-card img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .4s ease;
}


.moment-card:hover img {

    transform: scale(1.06);

}


/* DARK OVERLAY */

.moment-card-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.05) 25%,
            rgba(0,0,0,.68) 100%
        );

    pointer-events: none;
}


/* TEXT */

.moment-card-content {

    position: absolute;

    left: 9px;
    right: 7px;
    bottom: 8px;

    z-index: 2;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 5px;
}


.moment-card-content h4 {

    margin: 0;

    color: var(--white);

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 600;

    line-height: 1.15;
}


/* ROUND ARROW */

.moment-card-arrow {

    flex-shrink: 0;

    width: 25px;
    height: 25px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--white);

    color: var(--primary);

    font-size: 9px;
}


/* =========================================================
   DIFFERENT CRAVINGS
========================================================= */

.cravings-box {

    display: flex;

    align-items: center;

    min-height: 190px;

    padding: 18px 0 18px 20px;

    background:
        linear-gradient(
            105deg,
            #F9F6F0 0%,
            #F7F0E4 55%,
            #EFE5D2 100%
        );
}


/* CONTENT */

.cravings-content {

    position: relative;

    z-index: 3;

    width: 52%;

    flex-shrink: 0;
}


.cravings-content h3 {

    margin: 0 0 9px;

    color: var(--primary);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 21px;

    font-weight: 600;

    line-height: 1.08;
}


.cravings-content p {

    margin: 0 0 16px;

    color: var(--text-light);

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 10px;

    line-height: 1.45;

    max-width: 185px;
}


/* BUTTON */

.moment-button {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    min-height: 31px;

    padding: 0 13px;

    border-radius: 3px;

    background: var(--gold);

    color: var(--primary);

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 9px;

    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background .25s ease,
        transform .25s ease;
}


.moment-button:hover {

    background: var(--gold-light);

    transform: translateY(-2px);

}


.moment-button i {

    font-size: 8px;

}


/* IMAGE */

.cravings-image {

    position: absolute;

    right: -5px;

    bottom: 0;

    width: 58%;

    height: 100%;

    z-index: 1;

}


.cravings-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

}


/* =========================================================
   INNER CIRCLE
========================================================= */

.inner-circle-box {

    display: flex;

    min-height: 190px;

    padding: 17px 12px 15px 18px;

    background:
        linear-gradient(
            110deg,
            #FFFFFF 0%,
            #FBF8F1 100%
        );
}


.inner-circle-content {

    position: relative;

    z-index: 3;

    width: 60%;
}


.inner-circle-heading h3 {

    margin: 0 0 3px;

    color: var(--primary);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 22px;

    font-weight: 700;

    line-height: 1.15;
}


.inner-circle-heading p {

    margin: 0;

    color: #000;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 15px;

}


/* =========================================================
   STEPS
========================================================= */

.inner-circle-steps {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 8px;

    margin-top: 14px;

    max-width: 305px;
}


.inner-step {

    text-align: center;
}


.inner-step-icon {

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0 auto 5px;

    border: 1px solid var(--gold);

    border-radius: 50%;

    color: var(--gold);

    font-size: 11px;
}


.inner-step strong {

    display: block;

    color: var(--primary);

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;
}


.inner-step span {

    display: block;

    margin-top: 2px;

    color: var(--text-light);

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 11px;

    line-height: 1.2;
}


/* =========================================================
   LEARN MORE
========================================================= */

.inner-learn-button {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 13px;

    min-height: 29px;

    padding: 0 13px;

    border-radius: 3px;

    background: var(--primary);

    color: var(--white);

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 8px;

    font-weight: 600;

    text-decoration: none;

    transition:
        background .25s ease;
}


.inner-learn-button:hover {

    background: var(--primary-light);

}


/* =========================================================
   ENVELOPE
========================================================= */

.inner-envelope {

    position: absolute;

    right: 8px;

    bottom: 0;

    width: 40%;

    height: 88%;

    display: flex;

    align-items: center;

    justify-content: center;

    transform: rotate(-2deg);
}


.envelope-paper {

    position: relative;

    width: 100%;

    height: 78%;

    display: flex;

    align-items: flex-start;

    justify-content: center;

    padding-top: 18px;

    box-sizing: border-box;

    background:
        linear-gradient(
            135deg,
            #F9F3E8,
            #EDE1CC
        );

    box-shadow:
        0 8px 18px rgba(0,0,0,.08);
}


.envelope-paper::before {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    border-left:
        50px solid transparent;

    border-right:
        50px solid transparent;

    border-top:
        40px solid rgba(217,178,109,.18);
}


.envelope-paper span {

    position: relative;

    z-index: 2;

    color: var(--text-dark);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 12px;

    line-height: 1.25;

    text-align: center;
}


/* WAX SEAL */

.wax-seal {

    position: absolute;

    left: 50%;

    bottom: -13px;

    transform: translateX(-50%);

    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #A33D31,
            #713027
        );

    color: var(--gold-light);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        0 3px 7px rgba(0,0,0,.15);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    .moment-grid {

        grid-template-columns:
            1fr 1fr;

    }

    .shop-moment-box {

        grid-column: 1 / -1;

    }

    .cravings-box,
    .inner-circle-box {

        min-height: 210px;

    }

}


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

@media (max-width: 767px) {

    .moment-section {

        padding: 45px 0 55px;

    }


    .moment-grid {

        grid-template-columns: 1fr;

        gap: 14px;

    }


    .shop-moment-box {

        grid-column: auto;

        padding: 0 10px 10px;

    }


    .moment-box-header h3 {

        font-size: 21px;

    }


    .moment-box-header p {

        font-size: 10px;

    }


    .moment-cards {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;

    }


    .moment-card {

        aspect-ratio: 1.25 / 1;

    }


    .moment-card-content h4 {

        font-size: 12px;

    }


    .cravings-box {

        min-height: 220px;

        padding-left: 18px;

    }


    .cravings-content {

        width: 55%;

    }


    .cravings-content h3 {

        font-size: 21px;

    }


    .cravings-content p {

        font-size: 10px;

    }


    .inner-circle-box {

        min-height: 220px;

    }


    .inner-circle-content {

        width: 72%;

    }


    .inner-circle-heading h3 {

        font-size: 19px;

    }


    .inner-envelope {

        width: 27%;

    }

}

/* =========================================================
   TESTIMONIAL SECTION
========================================================= */

.testimonial-section {
    width: 100%;

    padding: 65px 0 70px;

    background: var(--white);
}


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

.testimonial-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}


.testimonial-title-wrap {
    display: flex;

    align-items: baseline;

    gap: 18px;
}


.testimonial-title-wrap h2 {
    margin: 0;

    color: var(--primary);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 22px;

    font-weight: 700;

    line-height: 1.2;
}


.testimonial-title-wrap span {
    color: #000;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 400;
}


/* =========================================================
   VIEW ALL
========================================================= */

.testimonial-view-all {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--primary);

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 11px;

    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;
}


.testimonial-view-all:hover {
    color: var(--gold-dark, var(--gold));
}


.testimonial-view-all i {
    font-size: 9px;
}


/* =========================================================
   CAROUSEL WRAPPER
========================================================= */

.testimonial-carousel-wrapper {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 2px;
}


/* =========================================================
   TRACK
========================================================= */

.testimonial-track {
    display: flex;

    transition:
        transform .45s ease;

    will-change: transform;
}


/* =========================================================
   EACH ITEM
========================================================= */

.testimonial-item {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    padding: 0 6px;
    box-sizing: border-box;
}

/* =========================================================
   MOBILE - 1 SLIDE
========================================================= */

@media (max-width: 767px) {
    .testimonial-item {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
}

/* =========================================================
   CARD
========================================================= */

.testimonial-card {
    display: flex;

    align-items: center;

    gap: 16px;

    /* min-height: 125px; */

    padding: 10px;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 6px;

    box-sizing: border-box;

    transition:
        box-shadow .25s ease,
        transform .25s ease;
}


.testimonial-card:hover {
    transform: translateY(-2px);

    box-shadow: var(--shadow);
}


/* =========================================================
   CUSTOMER IMAGE
========================================================= */

.customer-image {
    flex: 0 0 70px;

    width: 70px;
    height: 70px;

    overflow: hidden;

    border-radius: 50%;

    border: 2px solid var(--cream);

    background: var(--cream);
}


.customer-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   CONTENT
========================================================= */

.testimonial-content {
    min-width: 0;

    flex: 1;
}


/* STARS */

.testimonial-stars {
    margin-bottom: 5px;

    color: var(--gold);

    font-size: 13px;

    letter-spacing: 1px;

    line-height: 1;
}


/* REVIEW */

.testimonial-content p {
    margin: 0 0 7px;

    color: var(--text-dark);

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 11px;

    font-weight: 400;

    line-height: 1.45;
}


/* CUSTOMER NAME */

.testimonial-content strong {
    display: block;

    color: var(--primary);

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 10px;

    font-weight: 700;
}


/* =========================================================
   ARROWS
========================================================= */

.testimonial-arrow {
    position: absolute;

    top: 50%;

    z-index: 10;

    transform: translateY(-50%);

    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid var(--border);

    border-radius: 50%;

    background: var(--white);

    color: var(--primary);

    font-size: 11px;

    box-shadow:
        0 3px 12px rgba(0,0,0,.08);

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease;
}


.testimonial-arrow:hover {
    background: var(--primary);

    color: var(--white);
}


.testimonial-prev {
    left: -5px;
}


.testimonial-next {
    right: -5px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .testimonial-section {
        padding: 50px 0 60px;
    }


    .testimonial-title-wrap h2 {
        font-size: 27px;
    }


    .testimonial-title-wrap span {
        font-size: 11px;
    }


    .testimonial-item {
        flex: 0 0 50%;

        width: 50%;
    }

}


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

@media (max-width: 767px) {

    .testimonial-section {
        padding: 45px 0 50px;
    }


    .testimonial-header {
        align-items: flex-start;

        margin-bottom: 18px;
    }


    .testimonial-title-wrap {
        display: block;
    }


    .testimonial-title-wrap h2 {
        font-size: 24px;

        margin-bottom: 4px;
    }


    .testimonial-title-wrap span {
        font-size: 10px;
    }


    .testimonial-view-all {
        font-size: 10px;
    }


    .testimonial-item {
        flex: 0 0 100%;

        width: 100%;

        padding: 0 4px;
    }


    .testimonial-card {
        min-height: 130px;

        padding: 18px;

        gap: 15px;
    }


    .customer-image {
        flex-basis: 65px;

        width: 65px;
        height: 65px;
    }


    .testimonial-content p {
        font-size: 11px;
    }


    .testimonial-arrow {
        width: 32px;
        height: 32px;
    }


    .testimonial-prev {
        left: 0;
    }


    .testimonial-next {
        right: 0;
    }

}

/* =========================================================
   JOIN OUR COMMUNITY
========================================================= */

.community-section {
    width: 100%;

    padding: 55px 0 65px;

    background: var(--white);
}


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

.community-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}


.community-title {

    display: flex;

    align-items: baseline;

    gap: 14px;
}


.community-title h2 {

    margin: 0;

    color: var(--primary);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 22px;

    font-weight: 700;

    line-height: 1.2;
}


.community-title span {

    color: var(--primary);

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 11px;

    font-weight: 600;
}


/* =========================================================
   FOLLOW BUTTON
========================================================= */

.community-follow-btn {

    /* display: inline-flex; */

    align-items: center;

    gap: 8px;

    padding: 9px 16px;

    border-radius: 5px;

    background: var(--primary);

    color: var(--white);

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 10px;

    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background .25s ease,
        transform .25s ease;
}


.community-follow-btn:hover {

    background: var(--primary-light);

    color: var(--white);

    transform: translateY(-2px);
}


/* =========================================================
   GALLERY
========================================================= */

.community-gallery {

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 10px;

    width: 100%;
}


/* =========================================================
   IMAGE TILE
========================================================= */

.community-item {

    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 6px;

    background: var(--cream);

    text-decoration: none;
}


.community-item img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .4s ease;
}


.community-item:hover img {

    transform: scale(1.06);
}


/* =========================================================
   INSTAGRAM HOVER
========================================================= */

.community-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(8, 31, 58, .55);

    opacity: 0;

    transition:
        opacity .3s ease;
}


.community-item:hover .community-overlay {

    opacity: 1;
}


.community-overlay i {

    color: var(--white);

    font-size: 25px;
}


/* =========================================================
   TEXT TILE
========================================================= */

.community-text-tile {

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--primary);

}


.community-text-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 15px;
}


.community-text-content strong {

    color: var(--white);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 20px;

    font-weight: 500;

    line-height: 1.15;
}


.community-text-content span {

    margin-top: 8px;

    color: var(--gold);

    font-size: 22px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .community-section {

        padding: 50px 0 55px;
    }


    .community-title h2 {

        font-size: 25px;
    }


    .community-gallery {

        grid-template-columns:
            repeat(5, minmax(0, 1fr));

        gap: 7px;
    }


    .community-text-content strong {

        font-size: 15px;
    }

}


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

@media (max-width: 767px) {

    .community-section {

        padding: 42px 0 50px;
    }


    .community-header {

        align-items: flex-start;

        margin-bottom: 15px;
    }


    .community-title {

        display: block;
    }


    .community-title h2 {

        font-size: 23px;

        margin-bottom: 4px;
    }


    .community-title span {

        font-size: 10px;
    }


    .community-follow-btn {

        padding: 8px 11px;

        font-size: 9px;
    }


    .community-gallery {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 8px;
    }


    .community-item {

        aspect-ratio: 1 / 1;
    }


    .community-text-content strong {

        font-size: 18px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .community-gallery {

        gap: 6px;
    }


    .community-follow-btn {

        padding: 7px 9px;

        font-size: 8px;
    }

}

/* =========================================================
   GOOD FOOD HAPPIER PEOPLE TILE
========================================================= */

.community-text-tile {
    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--primary);

    border-radius: 6px;
}


.community-text-content {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 10px;
}


.community-text-content strong {
    display: block;

    color: var(--white);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 19px;
    font-weight: 600;

    line-height: 1.05;
}


.community-text-content span {
    margin-top: 6px;

    color: var(--gold);

    font-family: Georgia, serif;

    font-size: 20px;

    line-height: 1;
}


/* =========================================================
   369 FOOD COMPANY FOOTER
========================================================= */

.footer-369 {
    width: 100%;
    background: #06253d;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    padding: 25px;
}


/* =========================================================
   MAIN ROW
========================================================= */

.footer-369-main {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;

    min-height: 82px;

    padding: 8px 15px;

    display: flex;
    align-items: flex-start;

    box-sizing: border-box;

    gap: 22px;
}


/* =========================================================
   BRAND
========================================================= */

.footer-369-brand {
    flex: 0 0 255px;
    min-width: 255px;
}

.footer-369-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-369-logo img {
    /* width: 43px; */
    /* height: 43px; */
    object-fit: contain;
}

.footer-company-name {
    font-size: 12px;
    letter-spacing: 3px;
    line-height: 14px;
    white-space: nowrap;
}

.footer-company-sub {
    font-size: 7px;
    letter-spacing: 2px;
    text-align: center;
    margin-top: 2px;
}

.footer-tagline {
    font-size: 8px;
    margin-top: 5px;
    color: #d7e0e6;
    white-space: nowrap;
}


/* =========================================================
   COMMON COLUMNS
========================================================= */

.footer-369-column {
    flex: 0 0 auto;
    min-width: 70px;
}

.footer-369-column h4,
.footer-369-connect h4 {
    margin: 2px 0 13px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.footer-369-column a {
    display: block;

    color: #d4dde3;
    text-decoration: none;

    font-size: 10px;
    line-height: 13px;

    white-space: nowrap;
}

.footer-369-column a:hover {
    color: #fff;
}


/* =========================================================
   INDIVIDUAL WIDTHS
========================================================= */

.brands-column {
    min-width: 65px;
}

.help-column {
    min-width: 105px;
}

.legal-column {
    min-width: 105px;
}


/* =========================================================
   STAY CONNECTED
========================================================= */

.footer-369-connect {
    flex: 0 0 150px;
}

.footer-369-social {
    display: flex;
    gap: 10px;
    margin-bottom: 5px;
}

.footer-369-social a {
    color: #fff;
    text-decoration: none;
    font-size: 11px;
}

.footer-369-contact div {
    display: flex;
    align-items: center;

    gap: 5px;

    color: #d5dde3;

    font-size: 11px;
    /* line-height: 13px; */

    white-space: nowrap;
}

.footer-369-contact i {
    font-size: 7px;
}


/* =========================================================
   FSSAI
========================================================= */

.footer-369-fssai {
    margin-left: auto;

    flex: 0 0 130px;

    display: flex;
    align-items: center;

    gap: 7px;

    padding-top: 20px;
}

.fssai-text {
    font-family: Georgia, serif;

    font-size: 18px;
    font-style: italic;

    color: #d7d7d7;

    white-space: nowrap;
}

.safe-order {
    font-size: 6px;

    color: #d7d7d7;

    white-space: nowrap;
}

.safe-order span {
    color: #79b84a;
    font-size: 13px;
    margin-right: 2px;
}


/* =========================================================
   BOTTOM BAR
========================================================= */

.footer-369-bottom {
    width: 100%;

    border-top: 1px solid rgba(255,255,255,0.25);

    min-height: 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 4px 30px;

    box-sizing: border-box;
}

.footer-369-copy {
    font-size: 11px;
    color: #d3dbe0;
}

.footer-369-bottom-right {
    display: flex;
    align-items: center;

    gap: 8px;

    font-size: 10px;
    color: #d3dbe0;
}

.bottom-line {
    opacity: .4;
}


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

@media (max-width: 900px) {

    .footer-369-main {
        overflow-x: auto;
        min-width: 1100px;
    }

    .footer-369-bottom {
        min-width: 1100px;
    }

    .footer-369 {
        overflow-x: auto;
    }
}

/* =========================================================
   MOBILE FOOTER
========================================================= */

@media (max-width: 767px) {
.small, small {
  font-size: 10px;
}
    .footer-369-main {
        min-width: 0;
        width: 100%;
        padding: 22px 18px 15px;

        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px 25px;

        overflow: visible;
    }

    /* ---------------- BRAND ---------------- */

    .footer-369-brand {
        grid-column: 1 / -1;

        min-width: 0;
        width: 100%;
    }

    .footer-369-logo img {
        width: 48px;
        height: 48px;
    }

    .footer-company-name {
        font-size: 12px;
        letter-spacing: 2.5px;
    }

    .footer-company-sub {
        font-size: 7px;
    }

    .footer-tagline {
        font-size: 8px;
        white-space: normal;
        margin-top: 7px;
    }


    /* ---------------- COLUMNS ---------------- */

    .footer-369-column {
        min-width: 0;
        width: 100%;
    }

    .footer-369-column h4,
    .footer-369-connect h4 {
        font-size: 10px;
        margin-bottom: 7px;
    }

    .footer-369-column a {
        font-size: 8px;
        line-height: 17px;
        white-space: normal;
    }


    /* ---------------- CONNECT ---------------- */

    .footer-369-connect {
        min-width: 0;
        width: 100%;
        flex: none;
    }

    .footer-369-social {
        gap: 12px;
        margin-bottom: 7px;
    }

    .footer-369-social a {
        font-size: 14px;
    }

    .footer-369-contact div {
        font-size: 8px;
        line-height: 17px;

        white-space: normal;
        word-break: break-word;
    }


    /* ---------------- FSSAI ---------------- */

    .footer-369-fssai {
        min-width: 0;
        width: 100%;

        margin-left: 0;
        padding-top: 5px;

        display: flex;
        align-items: center;
    }

    .fssai-text {
        font-size: 18px;
    }

    .safe-order {
        font-size: 7px;
        white-space: normal;
    }


    /* ---------------- BOTTOM ---------------- */

    .footer-369-bottom {
        min-width: 0;
        width: 100%;

        padding: 9px 15px;

        display: flex;
        flex-direction: column;

        gap: 5px;

        text-align: center;
    }

    .footer-369-copy {
        font-size: 7px;
    }

    .footer-369-bottom-right {
        justify-content: center;
        flex-wrap: wrap;

        gap: 5px;

        font-size: 7px;
    }

}

:root {
            --brand-navy: #0a2540;
            --brand-green: #7cb342;
            --brand-green-hover: #689f38;
        }

        body {
            background-color: #f8fafc;
            color: #334155;
            font-family: "Montserrat", Arial, sans-serif;
        }

        /* Typography Override for Headings */
        h1, h2, h3, h4, h5, h6, .card-title, .nav-link {
            font-family: "Playfair Display", Georgia, serif;
        }

        .product-main-img {
            height: 420px;
            object-fit: cover;
            border-radius: 16px;
            background-color: #f1f5f9;
        }

        /* Scrollable thumbnail track */
        .thumbnail-scroll-container {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            scroll-behavior: smooth;
            padding-bottom: 6px;
        }
        .thumbnail-scroll-container::-webkit-scrollbar {
            height: 6px;
        }
        .thumbnail-scroll-container::-webkit-scrollbar-thumb {
            background-color: #cbd5e1;
            border-radius: 4px;
        }
        .thumbnail-img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            cursor: pointer;
            border: 2px solid transparent;
            border-radius: 12px;
            flex-shrink: 0;
            transition: all 0.2s ease-in-out;
        }
        .thumbnail-img:hover, .thumbnail-img.active {
            border-color: var(--brand-green);
            transform: translateY(-2px);
        }

        /* Brand Color Utilities */
        .text-brand-navy { color: var(--brand-navy) !important; }
        .text-brand-green { color: var(--brand-green) !important; }
        
        .badge-veg {
            background-color: #e8f5e9;
            color: #2e7d32;
            font-size: 0.75rem;
            padding: 6px 12px;
            border-radius: 50rem;
            font-weight: 600;
            font-family: "Montserrat", Arial, sans-serif;
        }

        .pricing-box {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            border-left: 4px solid var(--brand-green);
        }

        /* Custom buttons matching brand identity */
        .btn-brand-primary {
            background-color: var(--brand-navy);
            color: #ffffff;
            border: none;
            transition: 0.2s;
            font-family: "Montserrat", Arial, sans-serif;
        }
        .btn-brand-primary:hover {
            background-color: #133a5e;
            color: #ffffff;
        }

        .btn-variant {
            border: 1px solid #cbd5e1;
            color: #475569;
            background: #fff;
            transition: 0.2s;
            font-family: "Montserrat", Arial, sans-serif;
        }
        .btn-variant.active, .btn-variant:hover {
            border-color: var(--brand-navy);
            background-color: var(--brand-navy);
            color: #fff;
        }

        /* Custom Tabs styling */
        .nav-tabs .nav-link {
            color: #64748b;
            border: none;
            padding: 12px 20px;
            font-weight: 600;
        }
        .nav-tabs .nav-link.active {
            color: var(--brand-navy);
            background-color: transparent;
            border-bottom: 3px solid var(--brand-green);
        }

        .bg-info {
  --bs-bg-opacity: 1;
  background-color: rgb(217, 178, 109) !important;
}

.text-secondary {
  --bs-text-opacity: 1;
  color: #000;
}/* Force exact same color, font weight, and spacing for all three */
.food369-unified-action,
.food369-unified-action > button,
.food369-unified-action.dropdown-toggle {
  color: #ffffff !important;
  fill: #ffffff !important;
  font-size: 15px;
  font-weight: 500;
  background: transparent !important;
  padding: 0 !important;
  text-decoration: none;
    font-family: "Playfair Display", Georgia, serif;
}

.food369-unified-action:hover {
  color: #ffffff !important;
  opacity: 0.85;
}

/* Icon size and spacing consistency */
.food369-unified-action i {
  font-size: 1.1rem;
  line-height: 1;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff !important;;
  background-color: #06253d!important;
}
.nav-link:focus, .nav-link:hover {
  color: #06253d!important;
}.nav-pills .nav-link {
  border-radius: var(--bs-nav-pills-border-radius);
  color: #06253d;
  background: aliceblue;
  margin-bottom: 1em;
}


  :root {
            --sanmisha-navy: #0f172a;
            --sanmisha-blue: #1e293b;
            --sanmisha-teal: #062442;
            --sanmisha-accent: #062442;
            --sanmisha-light: #f8fafc;
        }

     
        .tracking-card {
            border: none;
            border-radius: 1rem;
            box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
            background: #ffffff;
            overflow: hidden;
            width: 100%;
        }

        .tracking-header {
            background: linear-gradient(135deg, var(--sanmisha-navy) 0%, var(--sanmisha-blue) 100%);
            color: white;
            padding: 2.5rem;
        }

        /* Form Control Customizations */
        .form-control:focus {
            border-color: var(--sanmisha-teal);
            box-shadow: 0 0 0 0.25rem rgba(14, 165, 233, 0.15);
        }

        .btn-sanmisha {
            background-color: var(--sanmisha-teal);
            border-color: var(--sanmisha-teal);
            color: white;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-sanmisha:hover {
            background-color: var(--sanmisha-accent);
            border-color: var(--sanmisha-accent);
            color: white;
        }

        /* Timeline Design */
        .timeline-steps {
            display: flex;
            justify-content: space-between;
            position: relative;
            margin-top: 3rem;
            margin-bottom: 2rem;
        }

        .timeline-steps::before {
            content: '';
            position: absolute;
            top: 24px;
            left: 10%;
            right: 10%;
            height: 4px;
            background-color: #e2e8f0;
            z-index: 1;
        }

        .timeline-steps .progress-bar-line {
            position: absolute;
            top: 24px;
            left: 10%;
            width: 0%; /* Initial state for Order Placed active */
            height: 4px;
            background-color: var(--sanmisha-teal);
            z-index: 2;
            transition: width 0.5s ease;
        }

        .timeline-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 3;
            flex: 1;
            text-align: center;
        }

        .timeline-icon {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.15rem;
            background: #ffffff;
            border: 3px solid #e2e8f0;
            color: #94a3b8;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }

        /* States */
        .timeline-step.completed .timeline-icon {
            background: var(--sanmisha-teal);
            border-color: var(--sanmisha-teal);
            color: white;
        }

        .timeline-step.active .timeline-icon {
            background: #ffffff;
            border-color: var(--sanmisha-teal);
            color: var(--sanmisha-teal);
            box-shadow: 0 0 0 6px rgba(14, 165, 233, 0.15);
            animation: pulse-ring 2s infinite;
        }

        .timeline-step.pending .timeline-icon {
            background: #f1f5f9;
            border-color: #e2e8f0;
            color: #cbd5e1;
        }

        .timeline-content {
            margin-top: 1rem;
            padding: 0 0.5rem;
        }

        .timeline-title {
            font-size: 0.95rem;
            font-weight: 600;
            margin-bottom: 0.25rem;
            color: #1e293b;
        }

        .timeline-step.pending .timeline-title {
            color: #94a3b8;
        }

        .timeline-date {
            font-size: 0.75rem;
            color: #64748b;
            font-weight: 500;
        }

        @keyframes pulse-ring {
            0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.3); }
            70% { box-shadow: 0 0 0 10px rgba(14, 165, 233, 0); }
            100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .timeline-steps {
                flex-direction: column;
                align-items: flex-start;
                margin-left: 1.5rem;
            }
            .timeline-steps::before, .timeline-steps .progress-bar-line {
                display: none;
            }
            .timeline-step {
                flex-direction: row;
                align-items: center;
                margin-bottom: 2rem;
                text-align: left;
                width: 100%;
            }
            .timeline-step:last-child {
                margin-bottom: 0;
            }
            .timeline-icon {
                margin-right: 1rem;
                flex-shrink: 0;
            }
            .timeline-content {
                margin-top: 0;
                padding: 0;
            }
        }


        /* Responsive Timeline Nodes & Text sizing */
.timeline-node {
    width: 36px;
    height: 36px;
    font-size: 13px;
}
.timeline-labels {
    font-size: 11px;
    font-weight: 500;
}

@media (max-width: 576px) {
    .timeline-node {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }
    .timeline-labels {
        font-size: 9px;
    }
}

/* Smooth collapsing transition */
.collapse:not(.show) {
    display: none;
}
.collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.8s ease-in-out;
}
.collapse.show {
    display: block;
}

@keyframes fillProgressSmooth {
    from { width: 0%; }
    to { width: var(--target-width); }
}
.collapse.show .progress-bar-animated-custom {
    animation: fillProgressSmooth 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.confetti-particle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    animation: burstParticle 0.8s ease-out forwards;
}
@keyframes burstParticle {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0.3); opacity: 0; }
}
/* ecstsy */

:root{
  --gold:#B07A2A;
  --gold-dark:#8E5F1C;
  --gold-soft:#D9A85A;
  --btn-top:#F8CC5A;
  --btn-bottom:#E9A92A;
  --cream:#FBF5EB;
  --cream-2:#F6EDDD;
  --brown:#24170D;
  --brown-2:#3A2614;
  --ink:#1E1E1E;
  --muted:#4A4A4A;
  --line:#E8D7B8;
  --serif:'Playfair Display', Georgia, serif;
  --sans:'Inter', Arial, sans-serif;
  --script:'Caveat', cursive;

  /* IMAGES — swap these paths for the real files */
  --img-hero:url('/templates/Default/images/inner-circle/hero-card-box.jpg');
  --img-hero-m:url('/templates/Default/images/inner-circle/hero-mobile.jpg');
  --img-testi-bg:url('/templates/Default/images/inner-circle/testimonials-cake.jpg');
  --img-together:url('/templates/Default/images/inner-circle/chocolates-together.jpg');
  --img-forgettable:url('/templates/Default/images/inner-circle/fruit-nut-cake.jpg');
  --img-join:url('/templates/Default/images/inner-circle/box-note.jpg');
}
 
/* warm fallback so blocks look right before images are added */
.ecstsy-photo{background-color:var(--brown);background-size:cover;background-position:center;background-repeat:no-repeat}

/* ---------- Button ---------- */
.ecstsy-btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(180deg,var(--btn-top),var(--btn-bottom));color:#2A1A08;
  font-weight:600;font-size:17px;padding:14px 38px;border-radius:6px;
  box-shadow:0 4px 12px rgba(176,122,42,.28);transition:transform .2s,box-shadow .2s}
.ecstsy-btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(176,122,42,.35)}
.ecstsy-btn-gold .bi{font-size:20px}

/* ---------- Script text ---------- */
.ecstsy-script{font-family:var(--script);color:#F3D9A6;line-height:1.05;transform:rotate(-8deg)}

/* =========================================================
   HERO
   ========================================================= */
.ecstsy-hero{position:relative;background:var(--cream);overflow:hidden;min-height:348px}
.ecstsy-hero-media{position:absolute;top:0;right:0;bottom:0;width:61%;background-image:var(--img-hero);background-position:right center}
.ecstsy-hero-media::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--cream) 0%,rgba(251,245,235,.85) 12%,rgba(251,245,235,0) 32%)}
.hero-quote{position:absolute;top:22px;right:40px;font-size:27px;text-align:center;z-index:2}
.ecstsy-hero-content{position:relative;z-index:2;padding:20px 0 22px 88px;max-width:620px}
.ecstsy-eyebrow{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:#5A4632;margin-bottom:8px}
.ecstsy-hero h1{font-family:var(--serif);font-weight:500;line-height:1;margin-bottom:12px}
.ecstsy-hero h1 .ecstsy-brand{display:block;font-size:68px;color:var(--gold);letter-spacing:.01em}
.ecstsy-hero h1 .ecstsy-sub{display:block;font-size:56px;color:var(--ink)}
.ecstsy-hero-tag{font-size:19px;font-weight:600;margin-bottom:12px}
.ecstsy-hero-text{font-size:16.5px;color:#333;margin-bottom:18px;max-width:470px}
.ecstsy-hero-note{font-size:12.5px;color:#333;margin-top:12px}
.ecstsy-hero-image-mobile{display:none}

/* =========================================================
   FEATURE STRIP
   ========================================================= */
.ecstsy-features{background:#fff;border-bottom:1px solid #f1e7d6}
.ecstsy-features ul{list-style:none;display:flex;justify-content:space-between;padding:12px 48px}
.ecstsy-features li{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:14px;color:#2a2a2a;
  padding:0 22px;border-right:1px solid var(--line);flex:1;line-height:1.25}
.ecstsy-features li:first-child{padding-left:0}
.ecstsy-features li:last-child{border-right:0;padding-right:0}
.ecstsy-ic{width:46px;height:46px;flex:0 0 46px;border:1.5px solid var(--gold-soft);border-radius:50%;
  display:grid;place-items:center;color:var(--gold);font-size:20px;background:#fff}
.ecstsy-ic svg{width:22px;height:22px}

/* =========================================================
   MIDDLE: HOW IT WORKS / PRIVILEGES / ELIGIBILITY
   ========================================================= */
.ecstsy-middle{display:grid;grid-template-columns:1.62fr 1fr .74fr;gap:24px;
  background:linear-gradient(180deg,#FDFAF5,#FBF6EE);padding:16px 30px 6px 52px}
.ecstsy-sec-title{font-family:var(--serif);font-weight:500;font-size:24px;color:var(--ink)}
.ecstsy-how-title{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:16px}
.ecstsy-how-title::before,.ecstsy-how-title::after{content:"";height:1px;flex:1;max-width:200px;
  background:linear-gradient(90deg,transparent,var(--gold-soft))}
.ecstsy-how-title::after{background:linear-gradient(90deg,var(--gold-soft),transparent)}
.ecstsy-how-title span.ecstsy-d{color:var(--gold-soft);font-size:11px}
.ecstsy-steps{display:flex;align-items:flex-start;justify-content:space-between}
.ecstsy-step{flex:1;text-align:center;padding:0 6px}
.ecstsy-step-ic{position:relative;width:64px;height:64px;margin:0 auto 18px;border:1.5px solid var(--gold-soft);
  border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:27px;background:#fff}
.ecstsy-step-num{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;
  background:linear-gradient(180deg,var(--btn-top),var(--btn-bottom));color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center}
.ecstsy-step h3{font-family:var(--serif);font-weight:500;font-size:16px;color:var(--gold-dark);margin-bottom:8px;line-height:1.25}
.ecstsy-step p{font-size:13px;color:#333;line-height:1.4}
.ecstsy-arrow{color:var(--gold-soft);font-size:20px;margin-top:22px}

.ecstsy-privileges{background:var(--cream-2);border-radius:10px;padding:14px 26px 14px 26px;align-self:start}
.ecstsy-privileges .ecstsy-sec-title{margin-bottom:12px}
.ecstsy-priv{list-style:none}
.ecstsy-priv li{display:flex;gap:16px;align-items:flex-start;margin-bottom:10px}
.ecstsy-priv li:last-child{margin-bottom:0}
.ecstsy-priv .ecstsy-pi{color:var(--gold);font-size:24px;width:30px;flex:0 0 30px;text-align:center;line-height:1}
.ecstsy-priv .ecstsy-pi svg{width:26px;height:26px}
.ecstsy-priv strong{display:block;font-family:var(--serif);font-weight:500;font-size:15.5px;color:var(--ink)}
.ecstsy-priv span{font-size:12.5px;color:#333}

.ecstsy-elig{background:#fff;border:1px solid var(--line);border-radius:6px;text-align:center;padding:16px 22px;
  align-self:start;margin-top:22px;height:calc(100% - 28px)}
.ecstsy-elig .ecstsy-bow{color:var(--gold);width:46px;height:38px;margin:0 auto 4px}
.ecstsy-elig h3{font-family:var(--serif);font-weight:500;font-size:23px;margin-bottom:8px}
.ecstsy-elig p{font-size:14px;color:#333;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.ecstsy-elig em{font-family:var(--sans);font-style:italic;font-size:17px;color:var(--gold);display:block;line-height:1.3}
.ecstsy-elig .bi-heart{color:var(--gold);font-size:18px;display:block;margin-top:8px}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.ecstsy-testi{position:relative;background:var(--brown) var(--img-testi-bg) center/cover no-repeat;padding:20px 60px 22px 270px;color:#fff;overflow:hidden}
.ecstsy-testi::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,17,8,.88) 0%,rgba(28,17,8,.72) 45%,rgba(28,17,8,.55) 100%)}
.ecstsy-testi>*{position:relative}
.ecstsy-testi .ecstsy-testi-script{position:absolute;left:40px;top:20px;width:210px;font-size:32px;text-align:center}
.ecstsy-testi .ecstsy-testi-script .bi{display:block;font-size:20px;margin-top:4px}
.ecstsy-testi-head h2{font-family:var(--serif);font-weight:500;font-size:22px}
.ecstsy-testi-head h2 b{font-weight:600}
.ecstsy-testi-head p{font-size:13px;opacity:.9;margin-bottom:8px}
.ecstsy-testi-row{display:flex;align-items:flex-end;gap:24px}
.ecstsy-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;flex:1;max-width:978px}
.ecstsy-card{background:#fff;color:var(--ink);border-radius:4px;display:flex;gap:14px;align-items:center;padding:10px 16px 10px 10px;min-height:96px}
.ecstsy-avatar{width:72px;height:72px;flex:0 0 72px;border-radius:50%;background:#d8c3a5 center/cover no-repeat}
.ecstsy-stars{color:#F2B21B;font-size:12px;letter-spacing:1px}
.ecstsy-card q{display:block;font-size:12.5px;line-height:1.3;quotes:"“" "”";margin:2px 0 4px}
.ecstsy-card cite{font-style:normal;font-size:12.5px;font-weight:600}
.ecstsy-testi .ecstsy-btn-gold{font-size:14px;padding:10px 20px;white-space:nowrap}

/* mobile-only blocks */
.ecstsy-m-only{display:none}

/* =========================================================
   FOOTER (mobile design — reuse site footer if already built)
   ========================================================= */
.ecstsy-site-footer{background:#0F1729;color:#fff;padding:22px 20px 18px}
.ecstsy-f-logo{display:flex;align-items:center;gap:10px;justify-content:center}
.ecstsy-f-logo .ecstsy-tri{width:40px;height:36px}
.ecstsy-f-logo b{font-family:var(--serif);font-weight:500;letter-spacing:.08em;font-size:15px;display:block}
.ecstsy-f-logo small{font-size:8px;letter-spacing:.3em;opacity:.8}
.ecstsy-f-tag{text-align:center;font-size:13px;margin:10px 0 14px;opacity:.9}
.ecstsy-f-links{list-style:none;border-top:1px solid rgba(255,255,255,.1)}
.ecstsy-f-links li a{display:flex;justify-content:space-between;padding:10px 0;font-size:14px}
.ecstsy-f-social{display:flex;justify-content:center;gap:22px;font-size:19px;padding:16px 0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
.ecstsy-f-bottom{text-align:center;font-size:12px;opacity:.9;padding-top:14px;line-height:1.7}
.ecstsy-f-bottom .ecstsy-fssai{font-family:var(--script);font-size:28px;line-height:1}

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width:1280px){
  .ecstsy-hero-content{padding-left:40px}
  .ecstsy-features ul{flex-wrap:wrap;gap:12px 0;padding:14px 24px}
  .ecstsy-features li{flex:0 0 25%;border-right:0;padding:0 10px}
  .ecstsy-middle{grid-template-columns:1fr 1fr;padding:24px}
  .ecstsy-middle .ecstsy-how{grid-column:1/-1}
  .ecstsy-elig{margin-top:0;height:auto}
  .ecstsy-testi{padding:24px 32px}
  .ecstsy-testi .ecstsy-testi-script{display:none}
  .ecstsy-testi-row{flex-direction:column;align-items:stretch}
  .ecstsy-testi .ecstsy-btn-gold{align-self:center}
}

/* =========================================================
   MOBILE (matches client mobile view)
   ========================================================= */
@media (max-width:767px){
  body{background:#fff}
  .ecstsy-m-only{display:block}
  /* hero */
  .ecstsy-hero{min-height:0;text-align:center;background:linear-gradient(180deg,#FCF7EF,#F7EBD7)}
  .ecstsy-hero-media{display:none}
  .hero-quote{display:none}
  .ecstsy-hero-content{padding:22px 20px 18px;max-width:none}
  .ecstsy-eyebrow{font-size:11px;letter-spacing:.16em;margin-bottom:6px}
  .ecstsy-hero h1 .ecstsy-brand{font-size:46px}
  .ecstsy-hero h1 .ecstsy-sub{font-size:40px}
  .ecstsy-hero-tag{font-size:16px;line-height:1.3}
  .ecstsy-hero-text{font-size:15px;max-width:none;text-align:left}
  .ecstsy-btn-gold{width:100%;max-width:340px;font-size:16px;padding:13px 20px}
  .ecstsy-hero-note{font-size:14px}
  .ecstsy-hero-image-mobile{display:block;aspect-ratio:180/486;max-height:none;width:100%;height:auto;background-image:var(--img-hero-m)}

  /* features vertical */
  .ecstsy-features ul{flex-direction:column;padding:18px 20px;gap:12px}
  .ecstsy-features li{flex:none;padding:0;font-family:var(--sans);font-size:14px}
  .ecstsy-ic{width:44px;height:44px;flex-basis:44px}

  .ecstsy-img-card{position:relative;aspect-ratio:180/294;border-radius:12px;margin:4px 12px 14px;overflow:hidden;background-image:var(--img-together)}

  /* middle */
  .ecstsy-middle{display:block;padding:20px 20px 10px;background:#fff}
  .ecstsy-how-title{margin-bottom:10px}
  .ecstsy-how-title::before,.ecstsy-how-title::after{max-width:60px}
  .ecstsy-steps{flex-direction:column;align-items:center}
  .ecstsy-step{padding:0;max-width:300px}
  .ecstsy-step-ic{width:64px;height:64px}
  .ecstsy-step h3{font-size:18px;margin-bottom:6px}
  .ecstsy-step p{font-size:14px}
  .ecstsy-arrow{transform:rotate(90deg);margin:12px 0}
  .ecstsy-privileges{background:#fff;padding:22px 0 10px;border-radius:0}
  .ecstsy-privileges .ecstsy-sec-title{font-size:24px}
  .ecstsy-priv strong{font-size:16px}
  .ecstsy-priv span{font-size:13px}
  .ecstsy-elig{margin:14px 0 18px;background:#FDF8EE;border-radius:10px}

  .ecstsy-img-card.ecstsy-forgettable{background-image:var(--img-forgettable);aspect-ratio:178/210;background-position:top center;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:16px;margin-top:0}
  .ecstsy-img-card.ecstsy-forgettable .ecstsy-btn-gold{position:relative;align-self:center;width:88%}

  /* testimonials */
  .ecstsy-testi{padding:24px 18px 20px;background-position:60% center}
  .ecstsy-testi::before{background:linear-gradient(180deg,rgba(28,17,8,.9),rgba(28,17,8,.7))}
  .ecstsy-testi-head h2{font-size:28px;line-height:1.15}
  .ecstsy-testi-head h2 b{display:block}
  .ecstsy-testi-head p{font-size:14px;margin:6px 0 14px}
  .ecstsy-cards{grid-template-columns:1fr;gap:12px}
  .ecstsy-card{padding:14px 12px;align-items:center}
  .ecstsy-card q{font-size:14px}
  .ecstsy-testi .ecstsy-btn-gold{width:100%;font-size:15px;padding:12px}

  .ecstsy-join-img{aspect-ratio:180/303;background-image:var(--img-join)}
  .ecstsy-join{text-align:center;padding:22px 20px 24px;background:#fff}
  .ecstsy-join h2{font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.15;margin-bottom:10px}
  .ecstsy-join p{font-size:15px;color:#333;margin-bottom:18px}
}/* ===========================================================
   FELIGO – Home page
   =========================================================== */
:root{
  --green-900:#0a3a20;
  --green-800:#0c4527;
  --green-700:#0f5530;
  --green-btn:#0d4a2b;
  --gold:#e8b53b;
  --gold-light:#f6d06b;
  --gold-dark:#c8951f;
  --cream:#fbf6ea;
  --cream-2:#f6efdf;
  --ink:#16213b;
  --text:#3b3b3b;
  --muted:#6b6b6b;
  --line:#ece4d2;
  --star:#f2a516;
  --radius:12px;
  --shadow:0 4px 18px rgba(30,40,20,.08);
  --f-head:'Roboto Slab', Georgia, serif;
  --f-body:'Poppins', Arial, sans-serif;
  --f-script:'Kaushan Script', cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);color:var(--text);background:var(--cream);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;border:0;background:none;cursor:pointer}
svg{width:1em;height:1em;flex-shrink:0}
.feligo-container{max-width:1320px;margin:0 auto;padding:0 32px}

.feligo-mobile-only,.feligo-mobile-only-inline{display:none !important}

/* ---------- buttons ---------- */
.feligo-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:13px 26px;border-radius:7px;transition:.2s ease;white-space:nowrap}
.feligo-btn svg{font-size:14px}
.feligo-btn-gold{background:linear-gradient(180deg,var(--gold-light),var(--gold));color:var(--green-900);box-shadow:0 4px 14px rgba(232,181,59,.35)}
.feligo-btn-gold:hover{filter:brightness(1.05);transform:translateY(-1px)}
.feligo-btn-outline{border:1.5px solid var(--gold);color:#fff}
.feligo-btn-outline:hover{background:rgba(232,181,59,.12)}
.feligo-btn-green{background:var(--green-btn);color:#fff}
.feligo-btn-green:hover{background:var(--green-700)}
.feligo-btn-whatsapp{background:#25a244;color:#fff}
.feligo-btn-whatsapp svg{font-size:18px}
.feligo-btn-block{display:flex;width:100%}

.feligo-section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:16px;gap:16px}
.feligo-section-title{font-family:var(--f-head);font-weight:700;color:var(--ink);font-size:26px;line-height:1.2}
.feligo-section-sub{color:var(--text);font-size:13px;margin-top:2px}
.feligo-view-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12.5px;color:var(--ink)}
.feligo-view-link svg{font-size:14px}
.feligo-view-link:hover{color:var(--green-700)}

/* ============ HERO ============ */
.feligo-hero{position:relative;background:radial-gradient(ellipse at 45% 30%,#0d4a29 0%,#032c18 55%,#022715 100%);color:#fff;overflow:hidden;min-height:440px}
.feligo-hero-inner{position:relative;z-index:2;max-width:1440px;margin:0 auto;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:40px;padding:34px 48px 26px}
.feligo-hero-brand{grid-row:1;align-self:start;padding-top:6px}
.feligo-hero-logo{width:240px;-webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 60%,transparent 100%)}
.feligo-hero-content{max-width:420px}
.feligo-hero h1{font-family:var(--f-head);font-weight:800;font-size:46px;line-height:1.1;color:#fff}
.feligo-hero h1{background:linear-gradient(180deg,#fff 0%,#fff 33%,var(--gold-light) 33%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.feligo-hero-content>p{margin:14px 0 22px;font-size:15px;color:#eef3ee;line-height:1.55}
.feligo-hero-btns{display:flex;gap:18px;flex-wrap:wrap}
.feligo-hero-features{grid-column:1/3;display:flex;gap:46px;margin-top:34px}
.feligo-hero-features li{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:11.5px;line-height:1.3;color:#e9efe9}
.feligo-feature-icon{width:40px;height:40px;border:1.5px solid var(--gold);border-radius:50% 50% 50% 50%;display:grid;place-items:center;color:var(--gold);font-size:20px;margin-bottom:8px;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:rgba(232,181,59,.08)}
.feligo-feature-icon{border-radius:0;outline:1.5px solid var(--gold);outline-offset:-3px}
.feligo-hero-visual.feligo-desktop-only{position:absolute;right:0;top:0;bottom:0;width:52%;z-index:1}
.feligo-hero-visual.feligo-desktop-only img{width:100%;height:100%;object-fit:cover;object-position:left center;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%);mask-image:linear-gradient(90deg,transparent 0,#000 14%)}

/* ============ CATEGORIES ============ */
.feligo-categories{background:var(--cream);padding:18px 0 14px;border-bottom:1px solid var(--line)}
.feligo-category-grid{display:grid;grid-template-columns:repeat(6,1fr)}
.feligo-category-item{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink);padding:4px 10px;border-right:1px solid var(--line);transition:.2s}
.feligo-category-item:last-child{border-right:0}
.feligo-category-image{width:120px;height:74px;border-radius:12px;overflow:hidden;display:block}
.feligo-category-image img{width:100%;height:100%;object-fit:cover}
.feligo-category-item:hover{color:var(--green-700)}
.feligo-category-item:hover .feligo-category-image{transform:translateY(-2px)}

/* ============ BEST SELLERS ============ */
.feligo-bestsellers{padding:26px 0 30px;background:#faf8f3}
.feligo-product-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.feligo-product-card{position:relative;background:#fff;border-radius:var(--radius);padding:12px 12px 14px;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.25s}
.feligo-product-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(30,40,20,.12)}
.feligo-wishlist{position:absolute;top:10px;right:10px;color:#555;font-size:17px;z-index:2}
.feligo-wishlist:hover{color:#e0473b}
.feligo-product-image{height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.feligo-product-image img{max-height:100%;object-fit:contain}
.feligo-product-card h3{font-size:12.5px;font-weight:600;color:#222;line-height:1.3}
.feligo-product-weight{font-size:11px;color:var(--muted);margin-top:2px}
.feligo-rating{font-size:10.5px;color:var(--muted);margin:3px 0 10px;display:flex;align-items:center;gap:4px}
.feligo-stars{color:var(--star);letter-spacing:1px}
.feligo-rating .feligo-star-half{color:#d9d4c7}
.feligo-product-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}
.feligo-price{font-size:17px;font-weight:700;color:#111}
.feligo-btn-add-cart{background:var(--green-btn);color:#fff;font-size:10.5px;font-weight:600;padding:7px 13px;border-radius:5px;letter-spacing:.04em}
.feligo-btn-add-cart:hover{background:var(--green-700)}

/* ============ BANNER ============ */
.feligo-cravings-banner{display:grid;grid-template-columns:51% 49%;align-items:stretch;background:var(--cream-2)}
.feligo-banner-image{position:relative;overflow:hidden;background:var(--cream-2)}
.feligo-banner-image img{width:100%;height:100%;object-fit:cover;object-position:left center;aspect-ratio:1096/380}
.feligo-banner-script{font-family:var(--f-script);color:#fff;font-size:34px;line-height:1.15;transform:rotate(-8deg);margin-left:8px}
.feligo-banner-content{padding:24px 40px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.feligo-banner-content h2{font-family:var(--f-head);font-weight:700;color:var(--ink);font-size:26px;margin-bottom:16px}
.feligo-better-way-list{display:grid;grid-template-columns:repeat(4,1fr);width:100%;max-width:600px}
.feligo-better-way-list li{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:12.5px;color:#333;line-height:1.35;padding:0 6px;border-right:1px solid #e3d8bf}
.feligo-better-way-list li:last-child{border-right:0}
.feligo-better-way-icon{width:62px;height:62px;border-radius:50%;background:#fff;box-shadow:var(--shadow);display:grid;place-items:center;color:var(--gold-dark);font-size:32px;margin-bottom:10px}

/* ============ MOOD ============ */
.feligo-mood{padding:22px 0 16px}
.feligo-mood-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.feligo-mood-card{position:relative;height:100px;border-radius:10px;overflow:hidden;color:#fff;padding:10px 12px;display:block;transition:.25s}
.feligo-mood-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.18)}
.feligo-mood-card h3{position:relative;z-index:2;font-family:var(--f-head);font-style:italic;font-weight:700;font-size:17px;line-height:1.1;text-shadow:0 1px 3px rgba(0,0,0,.25)}
.feligo-mood-card span{position:absolute;left:12px;bottom:9px;z-index:2;font-size:9.5px;line-height:1.2;opacity:.95}
.feligo-mood-card img{position:absolute;right:0;bottom:0;height:78%;width:58%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.feligo-mood-arrow{display:none}
.feligo-mood-fiery{background:linear-gradient(135deg,#d42c1f,#f27b22)}
.feligo-mood-cheesy{background:linear-gradient(135deg,#e2a316,#f6cf47)}
.feligo-mood-tangy{background:linear-gradient(135deg,#1d8a35,#7cc34a)}
.feligo-mood-chatpata{background:linear-gradient(135deg,#b23ab1,#e46fc4)}
.feligo-mood-desi{background:linear-gradient(135deg,#e2590f,#f6a43a)}
.feligo-mood-classic{background:linear-gradient(135deg,#3f6d22,#8eaa4a)}

/* ============ PROMO ============ */
.feligo-promo{padding:10px 0 18px}
.feligo-promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feligo-promo-card{background:linear-gradient(110deg,#fbf2df,#f6e8cc);border-radius:var(--radius);display:flex;align-items:center;min-height:120px;overflow:hidden;box-shadow:var(--shadow)}
.feligo-promo-text{padding:16px 0 16px 18px;flex:0 0 auto}
.feligo-promo-text h2{font-family:var(--f-head);font-weight:700;color:var(--ink);font-size:21px;line-height:1.2}
.feligo-promo-text p{font-size:12px;margin:4px 0 14px}
.feligo-promo-card>img{flex:1;min-width:0;height:120px;object-fit:cover;object-position:center}
.feligo-promo .feligo-btn{padding:10px 20px;font-size:11px}

/* ============ REVIEWS ============ */
.feligo-reviews{padding:10px 0 26px}
.feligo-reviews-grid{display:grid;grid-template-columns:1fr 250px;gap:24px;align-items:end}
.feligo-review-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feligo-review-card{background:#fff;border-radius:10px;padding:12px;display:flex;gap:12px;align-items:flex-start;box-shadow:var(--shadow)}
.feligo-review-card img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0}
.feligo-review-card .feligo-stars{font-size:11px}
.feligo-review-card p{font-size:11px;color:#333;margin:4px 0 6px;line-height:1.45}
.feligo-review-card strong{font-size:11.5px;color:#111}
.feligo-community{display:flex;align-items:flex-end;gap:6px;border-left:1px solid var(--line);padding-left:20px}
.feligo-community-text h3{font-family:var(--f-body);font-weight:700;font-size:12.5px;color:var(--ink)}
.feligo-community-text p{font-size:10.5px;margin:4px 0 10px;color:#444}
.feligo-socials{display:flex;gap:10px}
.feligo-socials a{font-size:20px;color:#111;transition:.2s}
.feligo-socials a:hover{color:var(--green-700)}
.feligo-community>img{width:110px}

/* ============ STORY ============ */
/* sections shown on mobile only (removed from desktop) */
.feligo-mobile-only-section{display:none !important}
.feligo-story{padding:26px 0}
.feligo-story-grid{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:18px;align-items:stretch;height:380px}
.feligo-story-banner{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.feligo-story-banner img{width:100%;height:100%;object-fit:cover}
.feligo-story-card{background:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.feligo-story-card h2{font-family:var(--f-head);font-weight:700;color:var(--ink);font-size:22px;line-height:1.25}
.feligo-story-card>p{font-size:13px;margin:12px 0 18px;color:#333}
.feligo-story-icons{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:20px}
.feligo-story-icons li{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:11.5px;line-height:1.3;color:#333}
.feligo-story-icons span{width:46px;height:46px;border-radius:50%;background:var(--cream);display:grid;place-items:center;color:var(--gold-dark);font-size:24px;margin-bottom:6px}

/* ============ CTA + NEWSLETTER ============ */
.feligo-cta-wrap{padding:0 0 30px}
.feligo-cta-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
.feligo-cta-card{background:radial-gradient(ellipse at 50% 0,#13552f,var(--green-900));color:#fff;border-radius:var(--radius);padding:30px;text-align:center;display:flex;flex-direction:column;align-items:center}
.feligo-cta-card h2{font-family:var(--f-head);font-weight:700;font-size:28px;line-height:1.2}
.feligo-cta-card p{font-size:13px;margin:10px 0 18px;color:#e5ece6}
.feligo-cta-icons{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px;width:100%;max-width:420px}
.feligo-cta-icons li{display:flex;flex-direction:column;align-items:center;font-size:12px;line-height:1.3;color:#e9efe9}
.feligo-cta-icons svg{font-size:30px;color:var(--gold);margin-bottom:8px}
.feligo-newsletter{background:#fff;border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:center}
.feligo-newsletter h2{font-family:var(--f-head);font-weight:700;color:var(--ink);font-size:24px}
.feligo-newsletter p{font-size:13px;margin:6px 0 16px}
.feligo-newsletter input{width:100%;padding:13px 14px;border:1px solid #ddd;border-radius:7px;font:inherit;font-size:13px;margin-bottom:12px;outline:none}
.feligo-newsletter input:focus{border-color:var(--green-700)}

/* ============ FOOTER ============ */
.feligo-footer-brand{background:var(--cream-2);display:flex;justify-content:center;padding:0}
.feligo-footer-brand{background:linear-gradient(180deg,var(--cream-2),#efe3c6)}
.feligo-footer-brand img{width:100%;max-width:420px;height:420px;object-fit:cover;object-position:center 20%}

/* ===========================================================
   TABLET
   =========================================================== */
@media (max-width:1200px){
  .feligo-hero-inner{padding:30px 32px 24px}
  .feligo-hero-logo{width:190px}
  .feligo-hero h1{font-size:38px}
  .feligo-hero-features{gap:28px}
  .feligo-product-grid{grid-template-columns:repeat(3,1fr)}
  .feligo-mood-grid{grid-template-columns:repeat(3,1fr)}
  .feligo-banner-script{font-size:28px}
  .feligo-reviews-grid{grid-template-columns:1fr}
  .feligo-community{border-left:0;padding-left:0;justify-content:center}
}
@media (max-width:960px){
  .feligo-hero-inner{grid-template-columns:1fr}
  .feligo-hero-brand{display:none}
  .feligo-hero-features{grid-column:1}
  .feligo-cravings-banner{grid-template-columns:1fr}
  .feligo-banner-image{min-height:0;aspect-ratio:1096/380}
  .feligo-promo-grid,.feligo-cta-grid,.feligo-story-grid{grid-template-columns:1fr}
  .feligo-story-grid{height:auto}
  .feligo-review-list{grid-template-columns:1fr}
}

/* ===========================================================
   MOBILE (matches client mobile view)
   =========================================================== */
@media (max-width:767px){
  .feligo-desktop-only,.feligo-desktop-only-inline{display:none !important}
  .feligo-mobile-only{display:block !important}
  .feligo-mobile-only-inline{display:inline-flex !important}
  .feligo-btn-block.feligo-mobile-only,.feligo-mobile-only.feligo-btn{display:flex !important}
  .feligo-container{padding:0 14px}
  body{font-size:13.5px}

  /* hero */
  .feligo-hero{min-height:0;background:linear-gradient(180deg,#0c4426 0%,var(--green-900) 100%)}
  .feligo-hero-inner{display:flex;flex-direction:column;padding:22px 16px 18px}
  .feligo-hero-brand{display:flex;justify-content:center;margin-bottom:10px}
  .feligo-hero-logo{width:150px}
  .feligo-hero-content{max-width:none}
  .feligo-hero h1{font-size:32px}
  .feligo-hero-content>p{font-size:14px;margin:10px 0 6px}
  .feligo-hero-visual.feligo-mobile-only{margin:0 -16px 14px}
  .feligo-hero-visual.feligo-mobile-only img{width:100%;height:auto}
  .feligo-hero-btns{flex-direction:column;gap:12px}
  .feligo-hero-btns .feligo-btn{width:100%;padding:14px}
  .feligo-hero-features{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:22px}
  .feligo-hero-features li{font-size:10.5px}
  .feligo-feature-icon{width:34px;height:34px;font-size:16px}
  .feligo-cravings-mobile{padding:34px 22px 30px;background:linear-gradient(160deg,#0c4426,#0a3a20);position:relative}
  .feligo-cravings-mobile p{font-family:var(--f-script);font-size:30px;line-height:1.15;transform:rotate(-8deg);color:#fff}

  /* categories */
  .feligo-categories{padding:18px 0;border:0}
  .feligo-section-title{font-size:22px}
  .feligo-categories .feligo-section-title{margin-bottom:12px}
  .feligo-category-grid{grid-template-columns:1fr 1fr;gap:12px}
  .feligo-category-item{border:0;background:#fff;border-radius:14px;padding:12px 10px 12px;box-shadow:var(--shadow);font-size:13px}
  .feligo-category-image{width:100%;height:96px;background:var(--cream)}

  /* best sellers */
  .feligo-bestsellers{padding:18px 0}
  .feligo-product-grid{grid-template-columns:1fr;gap:16px}
  .feligo-product-card{padding:18px}
  .feligo-product-image{height:180px}
  .feligo-product-card h3{font-size:15px}
  .feligo-product-weight{font-size:13px}
  .feligo-rating{font-size:12px}
  .feligo-price{font-size:24px}
  .feligo-btn-add-cart{font-size:12px;padding:9px 16px}
  .feligo-wishlist{font-size:22px;top:16px;right:16px}

  /* banner hidden, mobile version used */
  .feligo-cravings-banner{display:none}
  .feligo-better-way-mobile{background:#fff;padding:26px 16px 30px;text-align:center}
  .feligo-better-way-mobile h2{font-family:var(--f-head);font-weight:700;color:var(--ink);font-size:24px;line-height:1.2;margin-bottom:20px}
  .feligo-better-way-mobile .feligo-better-way-list{grid-template-columns:1fr 1fr;row-gap:22px;max-width:none}
  .feligo-better-way-mobile .feligo-better-way-list li{border:0;font-size:13px}
  .feligo-better-way-icon{width:76px;height:76px;font-size:38px}

  /* mood */
  .feligo-mood{padding:18px 0}
  .feligo-mood-grid{grid-template-columns:1fr;gap:12px;margin-bottom:16px}
  .feligo-mood-card{height:110px;padding:14px 16px}
  .feligo-mood-card h3{font-size:24px}
  .feligo-mood-card span{font-size:12px;left:16px;bottom:12px}
  .feligo-mood-card img{width:62%;height:90%}
  .feligo-mood-arrow{display:grid;place-items:center;position:absolute;right:10px;bottom:10px;width:30px;height:30px;border-radius:50%;background:#fff;color:#222;font-size:15px;z-index:3;font-style:normal}

  /* promo */
  .feligo-promo{padding:6px 0 0}
  .feligo-promo-grid{gap:16px}
  .feligo-promo-card{flex-direction:column;align-items:stretch;padding:18px 16px;background:linear-gradient(180deg,#fbf2df,#f5e6c8)}
  .feligo-promo-text{padding:0}
  .feligo-promo-text h2{font-size:24px}
  .feligo-promo-text p{font-size:13.5px;margin:6px 0 10px}
  .feligo-promo-card>img{height:auto;width:100%;margin-bottom:14px;border-radius:8px}

  /* reviews */
  .feligo-reviews{padding:20px 0}
  .feligo-reviews-grid{gap:18px}
  .feligo-review-list{gap:12px}
  .feligo-review-card{padding:16px;gap:14px}
  .feligo-review-card img{width:64px;height:64px}
  .feligo-review-card p{font-size:13px}
  .feligo-review-card .feligo-stars{font-size:15px}
  .feligo-review-card strong{font-size:13px}
  .feligo-review-dots{display:flex !important;justify-content:center;gap:6px;margin:14px 0 8px}
  .feligo-review-dots i{width:7px;height:7px;border-radius:50%;background:#cfcfcf}
  .feligo-review-dots i.feligo-active{background:#888}
  .feligo-view-link-center{display:flex !important;justify-content:center;font-size:14px}
  .feligo-community{flex-direction:column;align-items:flex-start;gap:14px}
  .feligo-community-text h3{font-family:var(--f-head);font-size:22px;line-height:1.2}
  .feligo-community-text p{font-size:13px}
  .feligo-socials{gap:18px}
  .feligo-socials a{font-size:24px}
  .feligo-community>img{width:100%;max-width:190px}

  /* story */
  .feligo-mobile-only-section{display:block !important}
  .feligo-footer-brand.feligo-mobile-only-section{display:flex !important}
  .feligo-story{padding:0}
  .feligo-story .feligo-container{padding:0}
  .feligo-story-grid{gap:0}
  .feligo-story-banner{border-radius:0;box-shadow:none}
  .feligo-story-card{border-radius:0;box-shadow:none;margin:0}
  .feligo-story-card h2{font-size:24px}
  .feligo-story-card>p{font-size:14px}

  /* cta */
  .feligo-cta-wrap{padding:0}
  .feligo-cta-wrap .feligo-container{padding:0}
  .feligo-cta-grid{gap:0}
  .feligo-cta-card{border-radius:0;padding:30px 20px}
  .feligo-newsletter{border-radius:0;box-shadow:none;padding:26px 16px}
  .feligo-newsletter h2{font-size:24px}
  .feligo-footer-brand img{max-width:none;height:auto}
}
.rev-main-wrapper {
            padding: 50px 0;
        }
        .rev-card-item {
            border: none;
            border-radius: 16px;
            background: #ffffff;
            box-shadow: 0 10px 30px rgba(220, 150, 70, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
        }
        .rev-card-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(220, 150, 70, 0.15);
        }
        .rev-avatar-circle {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #f39c12, #e67e22);
            color: #ffffff;
            font-weight: 600;
            font-size: 1.2rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(243, 156, 18, 0.3);
        }
        .rev-star-rating {
            color: #f39c12;
            font-size: 0.9rem;
            letter-spacing: 2px;
        }
        .rev-quote-text {
            font-size: 0.95rem;
            line-height: 1.6;
            color: #555555;
            font-weight: 300;
        }
        .rev-author-name {
            font-weight: 600;
            color: #2c3e50;
        }.help-card-wrapper {
            max-width: 750px;
            margin: 50px auto;
            padding: 0 15px;
        }
        .help-main-card {
            border: none;
            border-radius: 20px;
            background: #ffffff;
            box-shadow: 0 15px 35px rgba(220, 150, 70, 0.1);
            overflow: hidden;
        }
        .help-header-bg {
            background: linear-gradient(135deg, #2c3e50, #1a252f);
            color: #ffffff;
            padding: 40px 30px;
            text-align: center;
        }
        .help-contact-item {
            background: #fdfbf7;
            border: 1px solid #faeddb;
            border-radius: 12px;
            transition: all 0.3s ease;
        }
        .help-contact-item:hover {
            border-color: #f39c12;
            transform: translateY(-2px);
        }
        .help-icon-box {
            width: 45px;
            height: 45px;
            background: #faeddb;
            color: #d35400;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
        }
        .help-link-badge {
            display: inline-block;
            background: #f8f9fa;
            color: #495057;
            border: 1px solid #e9ecef;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
            text-decoration: none;
            transition: all 0.2s ease;
            margin: 4px;
        }
        .help-link-badge:hover {
            background: #f39c12;
            color: #ffffff;
            border-color: #f39c12;
        }

        /* Product image wrapper */
.product-card .position-relative.overflow-hidden {
    position: relative;
    overflow: hidden;
}

/* Ensure the main image dictates the card height */
.product-card .main-image {
    opacity: 1;
    width: 100%;
    transition: opacity 0.3s ease-in-out;
}

/* Make sure secondary image fills the exact same space */
.product-card .secondary-image {
    opacity: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    start: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Hover trigger */
.product-card:hover .main-image {
    opacity: 0;
}

.product-card:hover .secondary-image {
    opacity: 1;
}/* Thumbnail styling */
.thumb-item {
    opacity: 0.6;
    transition: all 0.2s ease-in-out;
}
.thumb-item:hover, .thumb-item.active-thumb {
    opacity: 1;
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

/* Image Magnify Zoom Effect */
.product-zoom-container {
    cursor: zoom-in;
}

.product-zoom-container img {
    transition: transform 0.2s ease;
    transform-origin: center center;
}.customer-initials {
    width: 60px;
    height: 60px;
    background-color: #f3e5f5; /* Adjust theme color as needed */
    color: #6a1b9a; /* Adjust text color as needed */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-right: 15px; /* Adjust spacing depending on your flex layout */
}.khakhra-hero-header {
      background: linear-gradient(135deg, #2c5e3b 0%, #1e3f26 100%);
      color: #ffffff;
      padding: 5rem 0;
      border-bottom-left-radius: 3rem;
      border-bottom-right-radius: 3rem;
    }
    .khakhra-badge-pill {
      background-color: rgba(255, 255, 255, 0.15);
      color: #ffda79;
      font-weight: 500;
      padding: 0.5rem 1rem;
      border-radius: 50rem;
    }
    .khakhra-feature-card {
      background: #ffffff;
      border: none;
      border-radius: 1rem;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.04);
    }
    .khakhra-feature-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 1rem 2rem rgba(44, 94, 59, 0.1);
    }
    .khakhra-icon-wrapper {
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #eaf3ed;
      color: #2c5e3b;
      border-radius: 50%;
      font-size: 1.5rem;
      margin-bottom: 1.25rem;
    }
    .khakhra-primary-btn {
      background-color: #2c5e3b;
      border: none;
      color: #ffffff;
      padding: 0.75rem 2rem;
      font-weight: 500;
      border-radius: 50rem;
      transition: background-color 0.2s ease;
    }
    .khakhra-primary-btn:hover {
      background-color: #1e3f26;
      color: #ffffff;
    }
    .khakhra-info-banner {
      background-color: #f4f8f5;
      border-left: 4px solid #2c5e3b;
      border-radius: 0.5rem;
      padding: 1.5rem;
    }

    .text-secondary {
  color: #555!important;
}