:root {
  --secondary-purple: #163829;
  --primary-purple: #40534b;
  --green-accent: #10b981;
  --orange-accent: #f97316;
  --light-green: #e9e3c3;
  --dark-text: #1f2937;

  /* New About Section Colors */
  --emerald-50: #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-200: #a7f3d0;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065f46;
  --emerald-900: #064e3b;
  --amber-50: #fffbeb;
  --amber-100: #fef3c7;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --red-500: #ef4444;
  --blue-500: #3b82f6;
  --green-500: #22c55e;
  --purple-500: #909048;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {

  background-color: #fbfaee;
  overflow-x: hidden;
  /* Add this to ensure the footer background is visible to the end */
  min-height: 100vh;
}

/* Section Management */
.section-content {
  display: none; 
}

.section-content.active {
  display: block; 
}

:root{
  --bp-phone: 414px;   /* typical largest phone (iPhone 12/13/14) */
  --bp-tablet: 768px;  /* tablet portrait (iPad) */
  --bp-laptop: 1024px; /* small laptop */
  --bp-desktop: 1280px;/* large desktop */
}

img, svg, picture, video {
  max-width: 100%;
  height: auto;
  display: block;
}

.hero {
  background-color: #6b22f2;
  color: white;
  padding: 2rem 1rem 4rem;
  border-radius: 2rem;
  position: relative;
  text-align: center;
  
}

.section-title {
  font-size: 3rem;
  font-weight: bold;
}


.nav-menu.mobile-open {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  background: white;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  z-index: 3002;
  min-width: 160px;
  align-items: flex-start;
}

/* Make sure nav items are full-width and tappable on mobile */
@media (max-width: 768px) {
  .nav-menu.mobile-open .nav-item {
    display: block;
    width: 100%;
    padding: 10px 4px;
    border-radius: 8px;
  }
}

/* Header Styles */
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: none;
  margin: 0 auto;
  border-radius: 50px;
  padding: 12px 30px;
  width: 90%;
  background-color: #d4f5e5;
  height: 65px;
  transition: all 0.3s ease;
  margin-top: 40px;
  pointer-events: auto; /* Make sure elements inside are clickable */
}

.header {
  transition: all 0.3s ease;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  display: flex;
  justify-content: center;
  /* pointer-events: none; */
  padding: 20px 0;
}
.header.shrink {
  padding: 5px 0;
}

.header-content.shrink {
  height: 50px;
  width: 45%;
  font-size: 16px;
  gap: 20px;
  justify-content: space-around;
  box-shadow: #282c2a84 0px 4px 20px;
}

.header-content.shrink .logo {
  display: none; /* Hide the logo when the header shrinks */
}

.profile-btn.shrink {
  padding: 5px 10px;
  font-size: 0.8rem;
  background-color: transparent;
}

.logo {
  background-color: transparent;
  color: var(--dark-text);
  padding: 8px 0;
  border-radius: 0;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 2px;
}

@media (max-width: 768px) {
  .header-content.shrink .logo {
    display: block; /* Show the logo for small screens */
    font-size: 1.2rem; /* Adjust the font size for smaller screens */
    margin-left: 10px; /* Add some spacing if needed */
  }

  .header-content {
    justify-content: space-between; /* Ensure proper spacing for small screens */
  }

  .nav-menu {
    display: none; /* Hide the navigation menu for small screens */
  }
}

.hamburger-menu {
  display: none; /* Hide by default */
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--dark-text);
}

/* ===========================
   STANDARDIZED MEDIA QUERIES
   =========================== */

/* Small phones (<= 414px)
   - Consolidated from: max-width: 480px and similar */
@media (max-width: var(--bp-phone)) {
  /* From @media (max-width: 480px) */
  .header-content {
    padding: 8px 10px;
    width: 100%;
  }
  .logo { font-size: 1rem; }
  .nav-menu { gap: 6px; }
  .profile-btn { padding: 6px 10px; font-size: 0.85rem; }
  .hamburger-menu { font-size: 1.2rem; }
  .hero-content h1 { font-size: clamp(2.2rem, 14vw, 3rem); }

  /* From @media (max-width: 480px) - Product card adjustments */
  .product-item,
  .pastries-section .product-item,
  .product-list .product-item {
    margin-left: auto;
    margin-right: auto;
  }

  /* From @media (max-width: 480px) - Product image tweaks */
  .product-image {
    margin: 12px auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 28px);
    max-width: 420px;
    box-sizing: border-box;
  }
  .product-image img {
    margin: 0 auto !important;
    display: block !important;
    width: auto !important;
    max-width: 90% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Product modal image */
  .product-modal-image {
    padding: 12px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto;
  }
  .product-modal-image img {
    margin: 0 auto !important;
    display: block !important;
    max-width: 80% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Hero coffee image */
  .coffee-image {
    left: 50% !important;
    transform: translate(-50%, -78%) !important;
    top: 78% !important;
    width: 82vw !important;
    height: auto !important;
    max-width: 420px;
  }
  .coffee-image img {
    display: block !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* Tablets: 415px - 767px
   - Consolidated from: max-width: 780px and min-width: 481px */
@media (min-width: calc(var(--bp-phone) + 1px)) and (max-width: calc(var(--bp-tablet) - 1px)) {
  /* From @media (max-width: 780px) and (min-width: 481px) */
  .product-image,
  .product-modal-image {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .product-image img,
  .product-modal-image img {
    max-width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
  }
  .coffee-image {
    left: 50%;
    transform: translate(-50%, -75%);
    width: min(75vw, 640px);
  }
}

/* Small laptops: 768px - 1023px
   - Consolidated from: max-width: 992px */
@media (min-width: var(--bp-tablet)) and (max-width: calc(var(--bp-laptop) - 1px)) {
  /* From @media (max-width: 992px) */
  .header-content { width: 94%; padding: 10px 16px; }
  .hero-section { min-height: 80vh; }
  .hero-content { gap: 12px; }
  .hero-content h1 { font-size: 4.5rem; }
  .hero-content h3 { font-size: 3rem; }
  .coffee-image { width: 70vw; transform: translate(-50%, -70%); }
  .product-modal-grid { grid-template-columns: 1fr; gap: 32px; }
  .product-modal-image img { max-width: 260px; }
  .product-item { width: 280px; margin: 12px; }
  .product-image { height: 200px; }
  .impact-stories { padding: 40px 0; }
}

/* Medium desktops: 1024px - 1279px
   - Consolidated from: max-width: 1200px */
@media (min-width: var(--bp-laptop)) and (max-width: calc(var(--bp-desktop) - 1px)) {
  /* From @media (max-width: 1200px) */
  .hero-content h1 { font-size: 6rem; }
  .hero-content h3 { font-size: 4.5rem; }
  .coffee-image { width: 60vw; height: auto; transform: translate(-50%, -70%); }
  .products-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .product-image { height: 220px; }
  .footer-brand-text h1 { font-size: 6rem; }
}

/* Large desktops: 1280px+
   - No original media queries; reserved for future wide-screen tweaks */
@media (min-width: var(--bp-desktop)) {
  /* Add large desktop-specific styles here if needed */
}

#productModal .product-modal-close-yellow,
.product-modal-close-yellow {
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 12070 !important;
  background: transparent !important;
  border: none !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
  border-color: #047857 !important;
  font-size: 28px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #374151 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Slightly smaller on narrow screens */
@media (max-width: 900px) {
  #productModal .product-modal-close-yellow,
  .product-modal-close-yellow {
    top: 10px !important;
    right: 10px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 22px !important;
  }
}

@media (max-width: 768px) {
  .hamburger-menu {
    display: block; /* Show the hamburger menu for small screens */
  }
}
.nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px; /* Add some padding for spacing */
}

.nav-item {
  margin: 0 10px;
  text-decoration: none;
  color: black; /* Adjust the text color */
  font-weight: 600;
  cursor: pointer; /* Add cursor pointer to indicate clickable */
}

.nav-item:hover,
.nav-item.active {
  background-color: transparent;
  color: var(--dark-text);
  opacity: 0.7;
}

.nav-item.active {
  color: var(--primary-purple); /* Highlight the active link */
}

.header,
.header-content,
.logo,
.nav-menu,
.profile-btn,
.profile-avatar,
.nav-item {
  transition: all 0.3s ease;
}

/* Profile Button */
.profile-btn {
  color: #fffbed;
  color: var(--dark-text);
  background-color: #f9fafb;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  margin-left: 5px;
}

.profile-btn:hover {
  background-color: #f3f4f6;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.profile-btn.shrink span {
  display: none;
}

.profile-avatar {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, var(--primary-purple), var(--secondary-purple));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
}

/* Auth Modals */
.auth-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 3000;
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease;
}

.auth-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.auth-content {
  background: white;
  border-radius: 24px;
  padding: 32px;
  max-width: 420px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  transform: scale(0.9);
  animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes modalSlideIn {
  to {
    transform: scale(1);
  }
}

.auth-header {
  text-align: center;
  margin-bottom: 24px;
}

.auth-header h3 {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary-purple), var(--secondary-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

.auth-header p {
  color: #64748b;
  font-size: 0.95rem;
}

.close-auth {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #f1f5f9;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  color: #64748b;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-auth:hover {
  background: #e2e8f0;
  color: var(--primary-purple);
  transform: rotate(90deg);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  position: relative;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--dark-text);
  font-size: 0.9rem;
}

.form-group input {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background-color: #fafbfc;
  font-family: inherit;
}

.form-group input:focus {
  outline: none;
  border-color: var(--primary-purple);
  background-color: white;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
  transform: translateY(-1px);
}

.form-group input::placeholder {
  color: #94a3b8;
}

.input-with-toggle {
  position: relative;      /* make wrapper relative */
  width: 100%;
}

.input-with-toggle input.password-field {
  width: 100%;
  padding-right: 40px;     /* space for the eye icon */
  box-sizing: border-box;  /* ensures padding is respected */
}

.input-with-toggle .password-toggle-btn {
  position: absolute !important;  /* force absolute positioning */
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  font-size: 1.1rem;
  line-height: 1;
  height: auto;
  width: auto;
}


.auth-btn {
  background: linear-gradient(135deg, var(--primary-purple), var(--secondary-purple));
  color: white;
  border: none;
  padding: 16px 32px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.auth-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(139, 92, 246, 0.4);
}

.auth-btn:active {
  transform: translateY(0);
}

.auth-switch {
  text-align: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e2e8f0;
}

.auth-switch p {
  color: #64748b;
  font-size: 0.9rem;
}

.auth-switch a {
  color: var(--primary-purple);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

/*dasdasdasd*/

.auth-switch a:hover {
  color: var(--secondary-purple);
  text-decoration: underline;
}

/* Success Message */
.success-message {
  background: linear-gradient(135deg, var(--green-accent), #059669);
  color: white;
  padding: 16px 20px;
  border-radius: 16px;
  text-align: center;
  margin-bottom: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
}

.success-message.show {
  display: flex;
  animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Loading State */
.auth-btn.loading {
  pointer-events: none;
  opacity: 0.8;
}

.auth-btn.loading::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: 8px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Hero Section */
.hero-section {
  background: linear-gradient(135deg, #40584e 0%, #163829 50%, #0f2c20 100%);
  min-height: 100vh;
  display:flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 40px 40px 40px 40px;
  margin-bottom: 30px;
  margin: 20px;
  margin-top: 20px;
  flex-direction:column;

  
 
}




/* Use clamp so headings scale smoothly */
.hero-content h1 { font-size: clamp(2.4rem, 8vw, 6.5rem); }
.hero-content h3 { font-size: clamp(1.8rem, 6vw, 5rem); }
.hero-content2 h2 { font-size: clamp(1.8rem, 6.5vw, 5.5rem); }
.about-hero-title, .products-hero-title, .locations-hero-title { font-size: clamp(2rem, 5.5vw, 4rem); }

/* Footer slogan: sane sizes and wrap */
.footer-slogan {
  position: relative;
  bottom: 0;
  width: 100%;
  left: 0;
  transform: none;
  padding: 10px 1rem;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-slogan h1, .footer-slogan h2, .footer-slogan h3 {
  font-size: clamp(2.2rem, 10vw, 8rem);
  line-height: 1;
  white-space: nowrap;
}
.main-footer {
  height: auto; /* let content define height on small screens */
  padding: 40px 1rem 30px;
}

/* Prevent extremely large fixed font sizes from overflowing on smaller viewports */
.footer-slogan h1, .footer-slogan h2, .footer-slogan h3,
.footer-brand-text h1 {
  max-width: 48vw;
  overflow-wrap: break-word;
  word-break: keep-all;
}

/* Constrain hero and card heights to be flexible */
.hero-section { min-height: clamp(50vh, 75vh, 100vh); }
.card, .card-orange, .card-green, .card-orange2, .card-green2 {
  min-height: auto;
  height: auto;
}

/* Make product grids truly responsive and centered */
.products-grid, .product-list, .pastries-section .product-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  justify-items: center;
  align-items: start;
  padding: 0 12px;
  box-sizing: border-box;
}

/* Ensure product-item does not rely on fixed widths */
.product-item {
  width: 100%;
  max-width: 380px;
  margin: 0;
  padding-left: 0;
  box-sizing: border-box;
}

/* Modal safety: make product modal full-screen on very small devices */
.product-modal {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  overflow-y: auto;
  padding: 16px;
  display: none;
  align-items: flex-start;
  justify-content: center;
}
.product-modal.active { display:flex; }
.product-modal-content {
  width: 100%;
  max-width: 1100px;
  padding: clamp(12px, 4vw, 48px);
  box-sizing: border-box;
}

/* Enhanced responsive modal handling */
.product-modal.product-modal-open {
  background: rgba(0,0,0,0.35); /* slightly darker for contrast */
  backdrop-filter: blur(2px);
}

html.no-scroll, body.no-scroll {
  overflow: hidden !important;
  touch-action: none;
}

/* Base positioning (desktop/tablet) */
.product-modal {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}

.product-modal.active .product-modal-content {
  background: #fff;
  border-radius: 28px;
  /* Desktop: allow natural height; no internal scroll (mobile will override) */
  max-height: none;
  overflow: visible;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  position: relative;
}

/* Mobile first adjustments */
@media (max-width: 780px) {
  .product-modal {
    align-items: flex-start;
    padding: env(safe-area-inset-top) 0 0 0; /* support iOS notch */
  }
  .product-modal.active .product-modal-content {
    width: 100%;
    max-width: 100%;
    min-height: 100vh; /* full height sheet */
    max-height: 100vh; /* constrain to viewport */
    overflow-y: auto; /* enable internal scroll only on mobile */
    -webkit-overflow-scrolling: touch;
    border-radius: 0;  /* edge-to-edge */
    padding: clamp(16px, 4vw, 32px) clamp(18px, 4vw, 32px) 48px;
    box-shadow: none;
  }
  .product-modal-close-yellow {
    top: 14px !important;
    right: 14px !important;
  }
  /* ensure image scales nicely */
  .product-modal-image img { max-width: 70%; height: auto; }
  .product-modal-title { font-size: 1.75rem; }
  .product-modal-price { font-size: 1.25rem; }
}

/* Very small devices */
@media (max-width: 420px) {
  .product-modal.active .product-modal-content { padding: 20px 18px 42px; }
  .product-modal-title { font-size: 1.55rem; }
  .product-modal-image img { max-width: 78%; }
}

/* Cap testimonial hover scale to avoid overflow on mobile */
.testimonial:hover { transform: scale(1.08); }

/* Utility responsive helpers */
.container, .container-fluid {
  padding-left: 12px;
  padding-right: 12px;
}

/* Improve nav/menu on tiny screens */
@media (max-width: 480px) {
  .header-content {
    padding: 8px 10px;
    width: 100%;
  }
  .logo { font-size: 1rem; }
  .nav-menu { gap: 6px; }
  .profile-btn { padding: 6px 10px; font-size: 0.85rem; }
  .hamburger-menu { font-size: 1.2rem; }
  .hero-content h1 { font-size: clamp(2.2rem, 14vw, 3rem); }
}

/* Tighter footer layout on small screens */
@media (max-width: 768px) {
  .footer-content-grid { grid-template-columns: 1fr; gap: 18px; }
  .footer-slogan h1, .footer-slogan h2, .footer-slogan h3 { font-size: clamp(1.6rem, 10vw, 6rem); white-space: normal; }
  .footer-brand-text h1 { font-size: clamp(2.2rem, 12vw, 6rem); }
}

/* Ensure hero coffee image doesn't overflow on narrow screens */
@media (max-width: 900px) {
  .coffee-image { left: 50%; transform: translate(-50%, -75%); width: min(80vw, 680px); height: auto; top: 75%; }
  .coffee-image img { width: 100%; height: auto; }
}

/* Accessibility: reduce motion if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rotating-text, .carousel-track, .testimonial:hover, .hero-section, .about-floating-bean, .products-floating-bean {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 480px) {
  /* Center product card image wells and their contents */
  .product-item,
  .pastries-section .product-item,
  .product-list .product-item {
    margin-left: auto;
    margin-right: auto;
  }

  .product-image {
    margin: 12px auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 28px);
    max-width: 420px;
    box-sizing: border-box;
  }

  .product-image img {
    margin: 0 auto !important;
    display: block !important;
    width: auto !important;
    max-width: 90% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Product modal image centered */
  .product-modal-image {
    padding: 12px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto;
  }
  .product-modal-image img {
    margin: 0 auto !important;
    display: block !important;
    max-width: 80% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Hero coffee image: center horizontally on narrow viewports */
  .coffee-image {
    left: 50% !important;
    transform: translate(-50%, -78%) !important;
    top: 78% !important;
    width: 82vw !important;
    height: auto !important;
    max-width: 420px;
  }
  .coffee-image img {
    display: block !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}
/* keep consistent centering for slightly larger phones / small tablets */
@media (max-width: 780px) and (min-width: 481px) {
  .product-image,
  .product-modal-image {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .product-image img,
  .product-modal-image img {
    max-width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
  }
  .coffee-image {
    left: 50%;
    transform: translate(-50%, -75%);
    width: min(75vw, 640px);
  }
}
.hero-content {
  display: flex; /* Enable Flexbox */
  flex-direction: row; /* Arrange items in a row */
  justify-content: center; /* Center the items horizontally */
  align-items: baseline; /* Align items based on their text baselines */
  gap: 20px; /* Add spacing between h1 and h3 */
  text-align: center; /* Center the text */
}

.hero-content2 {
  text-align: center;
  margin-top: 10px;
  flex-direction:column;
  z-index: 20;
}

.hero-content h1,
.hero-content h3 {
  font-family: "CooperBlack", sans-serif; /* Apply CooperBlack font */
  font-size: 10rem;
  font-weight: 900;
  color: #fffbed;
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.hero-content h1 {
  font-family: "CooperBlack", sans-serif;
  font-size: 10rem;
  font-weight: 900;
  color: #fffbed;
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.hero-content h3 {
  font-family: sans-serif;
  font-size: 90px;
  font-weight: 900;
  color: #fffbed;
  line-height: 0.9;
  letter-spacing: -0.02em;
  z-index: 20; /* Ensure it appears above the coffee image */
  top: -50px; /* Adjust the position as needed */
 
}

.hero-content2 h2 {
  font-family: "CooperBlack", sans-serif;
  font-size: 10rem;
  font-weight: 900;
  color: #fffbed;
  line-height: 0.9;
  letter-spacing: -0.02em;
}


.coffee-image {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-30%, -80%);
  height: 400px;
  z-index: 15;
  width: 900px;
  filter: drop-shadow(0px 0px 60px rgba(7, 3, 10, 0.3));
}

.coffee-image img {
  object-fit: cover;
  width: 65%; /* Make the image fill the container */
  filter: drop-shadow(0px 0px 80px rgba(7, 3, 10, 0.3));
  object-fit: cover;
}



/* Floating Coffee Beans */

/* Bottom Cards Section */
.cards-section {
  padding: 0 20px 20px;
  margin: 0 auto;
}

.cards-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 30px;
}

.cards-grid2 {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 30px;
}

.card {
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-orange {
  width: 100%;
  height: 400px;
}

.card-orange2 {
  width: 100%;
  height: 400px;
}

.card-orange img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.card-orange2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.card-green {
  width: 100%;
  height: 400px;
}

.card-green2 {
  width: 100%;
  height: 400px;
}

.card-green2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.card-green img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.circle-wrapper {
  width: 160px;
  height: 160px;
  z-index: 2;
}

.circle-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 160px;
  background-color: rgb(248, 243, 230);
  border-radius: 50%;
  z-index: 1;
}

.center-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  color: #633b2c;
  z-index: 3;
}

.rotating-text {
  width: 100%;
  height: 100%;
  animation: spin 12s linear infinite;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.rotating-text text {
  fill: #633b2c;
  font-size: 17.5px;
  font-family: Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Coffee Card Styles */
.coffee-card {
  background: white;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.coffee-card:hover {
  transform: translateY(-5px);
}

.coffee-card img {
  width: 80px;
  height: 80px;
  border-radius: 15px;
  object-fit: cover;
}

.coffee-card div {
  flex: 1;
}

.coffee-card strong {
  font-size: 1.2rem;
  color: var(--dark-text);
  display: block;
  margin-bottom: 5px;
}

.coffee-card p {
  font-size: 0.9rem;
  color: #6b7280;
  line-height: 1.4;
}

.coffee-card-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.coffee-card .fw-bold {
  font-size: 1.3rem;
  color: var(--primary-purple);
  font-weight: 800;
}

.coffee-section {
  margin-bottom: 50px;
}

.coffee-section h2 {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--dark-text);
  margin-bottom: 10px;
}

.coffee-section .text-muted {
  font-size: 1.1rem;
  margin-bottom: 30px;
}

/* ===== NEW ABOUT SECTION STYLES ===== */

/* About Section Background */
.about-section {

  min-height: 100vh;
}

/* About Hero Section */
.about-hero-header {
  height: 400px;
  background: linear-gradient(135deg, #40584e 0%, #163829 50%, #0f2c20 100%);
  border-radius: 40px;
  margin: 20px;
}

.about-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

.about-hero-title {
  font-size: 4rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.about-hero-subtitle {
  font-size: 1.5rem;
  font-weight: 600;
  opacity: 0.9;
}

.about-floating-bean {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--amber-600);
  border-radius: 50%;
  opacity: 0.6;
  animation: aboutFloat 3s ease-in-out infinite;
}

.about-bean-1 {
  top: 20%;
  left: 20%;
  animation-delay: 0s;
}

.about-bean-2 {
  top: 30%;
  right: 30%;
  animation-delay: 1s;
}

.about-bean-3 {
  bottom: 20%;
  left: 25%;
  animation-delay: 2s;
}

@keyframes aboutFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* About Story Section */


.about-image-container {
  position: relative;
  margin: 20px;
  width: 100%;
}

.about-image-bg {
  position: absolute;
  top: -1rem;
  left: -1rem;
  width: 100%;
  height: 100%;
background: #406760;
  border-radius: 1.5rem;
  z-index: -1;
}

.about-main-image {
  position: relative;
  z-index: 1;
}

/* ===== Pastries: horizontal / responsive grid ===== */
.pastries-section {
  max-width: 1200px;
  margin: 32px auto;
  padding: 0 16px;
  box-sizing: border-box;
}

.pastries-section .product-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  align-items: start;
  justify-items: stretch;
  padding: 12px 0;
  box-sizing: border-box;
}

/* card */
.pastries-section .product-item {
  width: 100%;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(23, 38, 33, 0.06);
  display: flex;
  flex-direction: column;
  transition: transform .16s ease, box-shadow .16s ease;
}

/* image well flush at top */
.pastries-section .product-image {
  background: linear-gradient(180deg,#203f33 0%,#274e41 100%);
  padding: 26px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  box-sizing:border-box;
  border-radius: 14px 14px 0 0;
  box-shadow: inset 0 6px 18px rgba(0,0,0,0.12);
}

/* optional wrapper for consistent square image */
.pastries-section .product-image .img-wrap {
  width: 160px;
  height: 160px;
  background: rgba(255,255,255,0.03);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  overflow:hidden;
}

/* image centered and constrained */
.pastries-section .product-image img {
  display:block;
  width: auto;
  height: auto;
  max-width: 86%;
  max-height: 140px;
  object-fit: contain;
  border-radius: 8px;
  margin: 0 auto;
}

/* info area */
.pastries-section .product-info {
  padding: 18px 20px 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* title */
.pastries-section .product-info h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f2a22;
  margin: 0;
}

/* badge */
.pastries-section .product-info .badge {
  display:inline-block;
  background:#e6f3ea;
  color:#064e3b;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:0.78rem;
}

/* description */
.pastries-section .product-info p {
  color:#6b7280;
  margin:0;
  font-size:0.95rem;
  line-height:1.45;
}

/* footer: left aligned on wide screens, center on very small */
.pastries-section .product-footer {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding: 0 20px 18px;
  margin-top:auto;
}

.pastries-section .view-btn {
  background: linear-gradient(135deg,#163829,#23433a);
  color:#f3ebd3;
  border:none;
  padding:10px 18px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
  box-shadow: 0 10px 28px rgba(17,50,42,0.10);
}

/* responsive: stack to single column on small screens */
@media (max-width: 780px) {
  .pastries-section {
    max-width: 360px;
    margin: 24px auto;
    padding: 0 12px;
  }
  .pastries-section .product-list {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .pastries-section .product-image .img-wrap { width: 140px; height: 140px; }
  .pastries-section .product-image img { max-height: 140px; max-width: 86%; }
  .pastries-section .product-footer { justify-content: center; padding-bottom: 20px; }
}

.about-floating-badge {
  position: absolute;
  bottom: -1rem; /* Adjust position as needed */
  right: -1rem; /* Adjust position as needed */
  background: white;
  padding: 1rem; /* Reduce padding to make it smaller */
  border-radius: 0.75rem; /* Adjust border radius for a smaller badge */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); /* Optional: Adjust shadow */
  font-size: 0.875rem; /* Reduce font size */
  z-index: 2;
}

.about-badge-icon {
  width: 3rem;
  height: 3rem;
  background: var(--emerald-600);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  font-weight: 700;
}

.about-badge-title {
  font-weight: 700;
  color: var(--emerald-800);
}

.about-badge-subtitle {
  font-size: 0.875rem;
  color: #6b7280;
}

.about-section-badge {
  background: var(--emerald-100);
  color: var(--emerald-800);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 1rem;
}

.about-section-badge.about-amber {
  background: var(--amber-100);
  color: var(--amber-700);
}

.about-section-badge.about-emerald-badge {
  background: var(--emerald-100);
  color: var(--emerald-800);
}

.about-section-title {
  font-size: 3rem;
  font-weight: 900;
  color: #111827;
  line-height: 1.1;
}

.about-section-subtitle {
  font-size: 1.25rem;
  color: #6b7280;
  max-width: 48rem;
}

.about-story-text {
  font-size: 1.125rem;
  color: #374151;
  line-height: 1.7;
}

.about-avatar-group {
  display: flex;
  margin-left: -0.5rem;
}

.about-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid white;
  margin-left: -0.5rem;
}

.about-avatar-1 {
  background: var(--emerald-600);
}
.about-avatar-2 {
  background: var(--amber-600);
}
.about-avatar-3 {
  background: #f97316;
}

/* About Values Section */
.about-values-section {
  margin: 5rem 0;
}

.about-value-card {
  background: white;
  padding: 2rem;
  border-radius: 1.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
  transition: all 0.3s ease;
  height: 100%;
  text-align: center;
}

.about-value-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.about-value-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  margin: 0 auto 1.5rem;
  transition: transform 0.3s ease;
}

.about-value-card:hover .about-value-icon {
  transform: scale(1.1);
}

.about-value-icon.about-red {
  background: var(--red-500);
}
.about-value-icon.about-blue {
  background: var(--blue-500);
}
.about-value-icon.about-emerald {
  background: var(--emerald-600);
}
.about-value-icon.about-green {
  background: var(--green-500);
}
.about-value-icon.about-amber-icon {
  background: var(--amber-600);
}
.about-value-icon.about-purple {
  background: var(--purple-500);
}

.about-value-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 1rem;
}

.about-value-description {
  color: #6b7280;
  line-height: 1.6;
}

/* About Team Section */
.about-team-section {
  margin: 5rem 0;
}

.about-team-container {
  background: white;
  border-radius: 1.5rem;
  padding: 3rem;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
}

.about-team-member {
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.about-team-member:hover {
  transform: translateY(-5px);
}

.about-member-image-container {
  pointer-events: auto;
  position: relative;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12rem;
  height: 12rem;
}

.about-member-image-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 12rem;
  height: 12rem;
  background: var(--emerald-200);
  border-radius: 50%;
  z-index: 1;
  border: 4px solid #fff;
  box-sizing: border-box;
}

.about-team-member:hover .about-member-image-bg {
  transform: scale(1.1);
}

.about-member-image {
  pointer-events: auto;
  position: relative;
  width: 11.5rem;
  height: 11.5rem;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: 2;
  display: block;
  margin: 0 auto;
}

.about-member-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

#showTermsBtn { white-space: nowrap; }
label[for="acceptTerms"] { white-space: nowrap; }



@media (max-width: 1200px) {
  .hero-content h1 { font-size: 6rem; }
  .hero-content h3 { font-size: 4.5rem; }
  .coffee-image { width: 60vw; height: auto; transform: translate(-50%, -70%); }
  .products-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .product-image { height: 220px; }
  .footer-brand-text h1 { font-size: 6rem; }
}

/* Portrait tablets */
@media (max-width: 992px) {
  .header-content { width: 94%; padding: 10px 16px; }
  .hero-section { min-height: 80vh; }
  .hero-content { gap: 12px; }
  .hero-content h1 { font-size: 4.5rem; }
  .hero-content h3 { font-size: 3rem; }
  .coffee-image { width: 70vw; transform: translate(-50%, -70%); }
  .product-modal-grid { grid-template-columns: 1fr; gap: 32px; }
  .product-modal-image img { max-width: 260px; }
  .product-item { width: 280px; margin: 12px; }
  .product-image { height: 200px; }
  .impact-stories { padding: 40px 0; }
  .footer-slogan h1 { font-size: 110px; }
  .footer-slogan h2 { font-size: 95px; }
  .footer-slogan h3 { font-size: 70px; }
}

/* Phones & the requested 780 width breakpoint */
@media (max-width: 780px) {
  /* Header */
  .header { padding: 12px 0; }
  .header-content { width: 94%; height: 56px; padding: 8px 14px; }
  .logo { font-size: 1.1rem; }
  .nav-menu { display: none; }
  .hamburger-menu { display: block; }

  /* Hero */
  .hero-section { min-height: 70vh; margin: 12px; border-radius: 24px; }
  .hero-content { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .hero-content h1 { font-size: 3rem; }
  .hero-content h3 { font-size: 2rem; }
  .hero-content2 h2 { font-size: 3.2rem; }
  .coffee-image { width: 82vw; height: auto; top: 78%; transform: translate(-50%, -78%); }

  /* Cards/Products */
  .cards-grid,
  .cards-grid2 { grid-template-columns: 1fr; gap: 16px; }
  .card-orange, .card-orange2, .card-green, .card-green2 { height: 260px; }
  .product-list { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 10px; }
  .product-item { width: 100%; margin: 0; border-radius: 16px; }
  .product-image { height: 180px; }
  .product-info { padding: 16px; }
  .price { font-size: 1.2rem; }
  .view-btn, .add-btn { padding: 8px 14px; }

  /* Pastries grid already uses grid; tighten spacing */
  .pastries-section .product-list { grid-template-columns: 1fr; gap: 16px; padding: 10px; }
  .pastries-section .product-image { margin: 14px; }

  /* Product modal on small screens */
  .product-modal { top: 0; left: 0; position: fixed; width: 100vw; height: 100vh; overflow-y: auto; border-radius: 0; }
  .product-modal-content { padding: 18px; }
  .product-modal-image { padding: 16px; }
  .product-modal-title { font-size: 1.8rem; }
  .product-modal-price { font-size: 1.4rem; margin-bottom: 18px; }

  /* Cart */
  .cart-content { max-width: 95vw; padding: 18px; }
  .cart-icon { width: 54px; height: 54px; right: 18px; bottom: 18px; }

  /* Testimonials */
  .testimonial { width: 110px; height: 110px; margin: 0 8px; }
  .carousel-container { max-width: 96vw; }

  /* Locations card */
  #locations .container .row > .col-md-6.p-0 img {
    max-height: 240px;
    border-radius: 14px;
  }

  /* Footer */
  .main-footer { height: auto; padding: 40px 0 28px; }
  .footer-content-grid { flex-direction: column; gap: 18px; }
  .footer-slogan { position: static; transform: none; gap: 10px; margin-top: 14px; }
  .footer-slogan h1 { font-size: 64px; }
  .footer-slogan h2 { font-size: 56px; }
  .footer-slogan h3 { font-size: 38px; }
  .footer-brand-text h1 { font-size: 3rem; }
  .footer-social, .footer-deliver { margin-left: 0; }
}



/* Optional: show nav when toggled via JS */
.nav-menu.mobile-open {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  position: absolute;
  top: 100%;
  right: 0;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 3001;
}

/* Responsive adjustments for team circles and bubbles */
@media (max-width: 900px) {
  .about-member-image-container,
  .about-member-image-bg {
    width: 8rem;
    height: 8rem;
  }
  .about-member-image {
    width: 7.5rem;
    height: 7.5rem;
  }
  .about-team-member .team-bubble {
    width: 1.7rem;
    height: 1.7rem;
    font-size: 1.2rem;
    left: -2.2rem;
    right: -2.2rem;
  }
}

@media (max-width: 600px) {
  .about-team-container {
    padding: 1.5rem;
  }
  .about-member-image-container,
  .about-member-image-bg {
    width: 6rem;
    height: 6rem;
  }
  .about-member-image {
    width: 5.5rem;
    height: 5.5rem;
  }
  .about-team-member .team-bubble {
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0.9rem;
    left: -1.5rem;
    right: -1.5rem;
  }
}

/* About CTA Section */
.about-cta-section {
  margin: 5rem 0;
}

.about-cta-container {
  background:#3f685b;
  border-radius: 1.5rem;
  padding: 3rem;
  position: relative;
}

.about-cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 1.5rem;
}

.about-cta-title {
  font-size: 3rem;
  font-weight: 900;
}

.about-cta-subtitle {
  font-size: 1.25rem;
  opacity: 0.9;
  max-width: 32rem;
  margin: 0 auto;
}

.about-cta-btn-primary {
  color: var(--emerald-800);
  font-weight: 700;
  border-radius: 1rem;
  padding: 1rem 2rem;
  transition: all 0.3s ease;
}

.about-cta-btn-primary:hover {
  background: #f3f4f6;
  transform: translateY(-2px);
}

.about-cta-btn-secondary {
  border: 2px solid white;
  font-weight: 700;
  border-radius: 1rem;
  padding: 1rem 2rem;
  transition: all 0.3s ease;
}

.about-cta-btn-secondary:hover {
  background: white;
  color: var(--emerald-800);
}

.about-cta-decoration {
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.about-decoration-1 {
  top: 2.5rem;
  right: 2.5rem;
  width: 5rem;
  height: 5rem;
}

.about-decoration-2 {
  bottom: 2.5rem;
  left: 2.5rem;
  width: 4rem;
  height: 4rem;
}

.about-decoration-3 {
  top: 50%;
  left: 5rem;
  width: 0.5rem;
  height: 0.5rem;
  background: rgba(255, 255, 255, 0.3);
}

.about-decoration-4 {
  top: 25%;
  right: 25%;
  width: 0.75rem;
  height: 0.75rem;
  background: rgba(255, 255, 255, 0.2);
}

/* ===== END NEW ABOUT SECTION STYLES ===== */

/* Contact Section */

.contact{
  margin:20px;
}

.contact-section {
  max-width: 1400px;
  margin:20px;
  border-radius: 20px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  
}

/* Locations Card Custom Style */
.container1 {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.location-card {
  background: #f8f9fa;
  border-radius: 1.5rem;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}


.location-card img {
  object-fit: cover;
  width: 100%;
  height: auto;
  max-height: 350px;
  display: block;
}
.location-card-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem;
}

.location-card-info small {
  color: #6c757d;
}

.location-card-info h1 {
  font-weight: bold;
  margin-bottom: 1rem;
}

.location-card-info ul {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.location-card-info li {
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
}

@media (max-width: 768px) {
  .location-card {
    flex-direction: column;
  }
  .location-card-info {
    padding: 1.5rem;
  }
}

.contact-info h2 {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary-purple);
  margin-bottom: 30px;
}

.contact-item {
  margin-bottom: 25px;
}

.contact-item h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--dark-text);
}

.contact-item p {
  color: #6b7280;
  line-height: 1.5;
}

.contact-form {
  background: white;
  padding: 40px;
  border-radius: 25px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--dark-text);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 15px;
  border: 2px solid #e5e7eb;
  border-radius: 15px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-purple);
}

.submit-btn {
  background: linear-gradient(135deg, var(--primary-purple), var(--secondary-purple));
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  width: 100%;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(139, 92, 246, 0.4);
}

/* Products Section */


.products-hero-header {
  height: 400px;
  background: linear-gradient(135deg, #40584e 0%, #163829 50%, #0f2c20 100%);
  border-radius: 40px;
  margin: 20px;
}

.products-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

.products-hero-title {
  font-size: 4rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.products-hero-subtitle {
  font-size: 1.5rem;
  font-weight: 600;
  opacity: 0.9;
}

.products-floating-bean {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--amber-600);
  border-radius: 50%;
  opacity: 0.6;
  animation: aboutFloat 3s ease-in-out infinite;
}

.products-bean-1 {
  top: 20%;
  left: 20%;
  animation-delay: 0s;
}

.products-bean-2 {
  top: 30%;
  right: 30%;
  animation-delay: 1s;
}

.products-bean-3 {
  bottom: 20%;
  left: 25%;
  animation-delay: 2s;
}

@keyframes productsFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}




.products-header {
  text-align: center;
  margin-bottom: 60px;
}

.delivery-badge {
  background: var(--light-green);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--dark-text);
  margin-bottom: 20px;
}

.products-header h2 {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--dark-text);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.product-item {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  width: 300px;
  margin: 20px;
  padding-left: 20px;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.product-item:hover {
  transform: translateY(-10px);
}

/* Fade out hidden products */
.product-item[style*="display: none"] {
  opacity: 0 !important;
  pointer-events: none;
}

.product-image {
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.product-image img {
  width: 80%;
  height: 80%;
  object-fit: cover;
  border-radius: 10px;
}

.product-info {
  padding: 25px;
}

.product-info h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--dark-text);
}

.product-info p {
  color: #6b7280;
  margin-bottom: 20px;
  line-height: 1.5;
}

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

.price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary-purple);
}

.view-btn {
  background: linear-gradient(135deg, var(--primary-purple), var(--secondary-purple));
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.view-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4);
}

.add-btn {
  background: linear-gradient(135deg, var(--primary-purple), var(--secondary-purple));
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4);
}

/* Product Detail Modal */
.product-modal {
  display: none;
  position: absolute;
  top: 550px;
  left: 0;
  width: 100%;
  background-color: #e5e7eb;
  z-index: 3000;
  border-radius: 30px 30px 0 0;
  box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.2);
  /* Remove max-width, margin, fixed, overlay, align-items, justify-content */
}


.product-modal-details {
  background: white;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

/* Title / price */
.product-modal-title { font-size: 20px; font-weight:800; color:#0f2a22; margin-bottom:6px; }
.product-modal-price { font-size:14px; color:#374151; }

/* Field label */
.field-label { font-size:12px; color:#94a3b8; font-weight:700; }

/* Chips (size / sugar) */
.chip-row { display:flex; gap:8px; flex-wrap:wrap; }
.chip {
  padding: 7px 14px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  border: 2px solid #edf2f7;
  font-weight:700;
  cursor:pointer;
  font-size:13px;
}
.chip.active { background:#235c3e; color:#fff; border-color:#235c3e; }

/* Add-ons styling */
.add-ons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.add-on-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 2px solid #e5e7eb;
  background: transparent;
  font-weight: 700;
  color: #374151;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
}

.add-on-btn .price {
  font-weight: 700;
  color: #374151;
  font-size: 12px;
}

.add-on-btn.active {
  background: #235c3e;
  color: #fff;
  border-color: #235c3e;
}

.add-on-btn.active .price {
  color: #fff;
}

/* Selected toppings in cart */
.cart-item-toppings {
  font-size: 0.9em;
  color: #6b7280;
  margin-top: 6px;
}



.product-modal-sugar .sugar-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 6px;
}
.product-modal-sugar .sugar-btn {
  appearance: none;
  -webkit-appearance: none;
  background: #f6f7f6;
  color: #374151;
  border: 2px solid #e6eef0;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all .14s ease;
  min-width: 92px;
  text-align: center;
}
.product-modal-sugar .sugar-btn:hover { transform: translateY(-2px); }

/* active state */
.product-modal-sugar .sugar-btn.active {
  background: #23433e;
  color: #fff;
  border-color: #23433e;
  box-shadow: 0 8px 18px rgba(35,67,58,0.12);
}

/* ensure sugar buttons don't inherit odd styles from other rules */
.sugar-buttons .sugar-btn,
.product-modal-sugar .sugar-btn { box-shadow: none; }

/* small screens */
@media (max-width: 780px) {
  .product-modal-sugar .sugar-btn { padding: 8px 14px; min-width: 80px; font-size: 13px; }
}

.selected-topping {
  display: inline-block;
  padding: 2px 8px;
  background: #f3f4f6;
  border-radius: 999px;
  margin: 2px;
  font-size: 0.85em;
}

/* Add to cart button (prominent) */
.product-modal-add-cart {
  background: #235c3e;
  color: #fff;
  border: none;
  font-weight:800;
  border-radius: 999px;
  padding: 12px 18px;
}
.product-modal-add-cart:hover { background:#1a472f; transform:translateY(-2px); }

/* Responsive tweaks */
@media (max-width:780px) {
  .product-modal-details { padding:16px; border-radius:14px; }
  .add-ons-grid { grid-template-columns: repeat(2, 1fr); }
}

.product-modal.active {
  display: block;
}

.product-modal-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 24px 24px;
  position: relative;
  background: none;
  border-radius: 0;
  box-shadow: none;
  display: block;
  flex-direction: unset;
  gap: unset;
  align-items: unset;
  width: unset;
}

.product-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  width: 100%;
}

.payment-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 12050;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.payment-modal.open {
  display: flex;
  pointer-events: auto;
}

/* subtle backdrop separate from dialog so content behind is dimmed */
.payment-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(0.3px);
  border-radius: 14px;
}

/* dialog panel */
.payment-modal-dialog {
  position: relative;
  z-index: 12060;
  background: #fff;
  width: 100%;
  max-width: 560px;
  padding: 22px;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
  pointer-events: auto;
}

/* close button */
.payment-modal-close {
  position: absolute;
  right: 14px;
  top: 10px;
  border: none;
  background: transparent;
  font-size: 22px;
  color: #2d4a3a;
  cursor: pointer;
}

/* actions row */
.payment-modal-actions .auth-btn {
  border-radius: 10px;
}

/* GCash preview */
.gcash-preview img { max-width: 100%; height: auto; display:block; margin: 8px auto; }
.gcash-preview { display: none; }

/* small screens */
@media (max-width: 600px) {
  .payment-modal-dialog { margin: 12px; width: calc(100% - 24px); max-width: 420px; padding: 18px; }
}

.product-modal-image {
  background-color: white;
  border-radius: 24px;
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  min-width: unset;
  max-width: unset;
  width: unset;
  height: unset;
  margin: unset;
}

.product-modal-image img {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
  max-height: unset;
}

/* -- Product details: match pasted image (white card, large title, clean spacing) -- */
.product-modal-details {
  background-color: #ffffff;      /* keep white card */
  border-radius: 18px;           /* soft rounded corners */
  padding: 36px 36px 28px;       /* roomy padding like image 2 */
  box-shadow: 0 20px 40px rgba(10,20,15,0.06);
  max-width: 560px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Title / price hierarchy */
.product-modal-title {
  font-size: 44px;       /* large heading like image 2 */
  line-height: 1;
  font-weight: 900;
  color: #0f2a22;
  margin: 0 0 6px 0;
}

.product-modal-price {
  font-size: 22px;
  color: #23433a;
  margin-bottom: 8px;
  font-weight: 700;
}

/* Description block */
.product-modal-description h3 {
  font-size: 13px;
  font-weight: 700;
  color: #9ca3af;
  margin-bottom: 8px;
}
.product-modal-description p {
  color: #6b7280;
  font-size: 15px;
  margin: 0 0 6px 0;
}

/* Field label spacing */
.product-modal-sizes h3,
.product-modal-sugar h3,
.product-modal-toppings h3 {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 8px 0 12px;
}

/* Size buttons (pill style) */
.size-buttons {
  display: flex;
  gap: 12px;
}
.size-buttons .size-btn {
  padding: 12px 28px;
  border-radius: 999px;
  border: 2px solid #23433a;
  background: transparent;
  color: #23433a;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  transition: all .15s ease;
}
.size-buttons .size-btn.active,
.size-buttons .size-btn:hover {
  background: #23433a;
  color: #fff;
  transform: translateY(-2px);
}

/* Sugar buttons use same pill style but smaller */
.product-modal-sugar .size-btn {
  padding: 8px 18px;
  border-radius: 999px;
  border: 2px solid #e6eef0;
  color: #374151;
  background: #f6f7f6;
}
.product-modal-sugar .size-btn.active {
  background: #23433a;
  color: #fff;
  border-color: #23433a;
}



/* Total + add to cart row (button prominent, aligned right) */
.product-modal-add-cart,
.product-modal .product-modal-add-cart,
.product-modal .product-modal-add-cart:focus {
  background: #23433a !important;
  color: #fff !important;
  border: none;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(35,68,58,0.18);
}

.product-modal .modal-total,
#modalTotalLabel {
  font-weight: 800;
  color: #23433a;
  font-size: 16px;
}

/* Footer row: keep total left and button right */
.product-modal-details > div:last-child,
.product-modal-details .product-modal-footer,
.product-modal-details > .footer-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

/* Small screens: keep layout tidy */
@media (max-width: 900px) {
  .product-modal-details {
    padding: 28px;
    border-radius: 14px;
  }
  .product-modal-title { font-size: 28px; }
  .product-modal-price { font-size: 18px; }
  .size-buttons .size-btn { padding: 10px 18px; }
  .product-modal .product-modal-image img { max-width: 180px; }
}


/* Responsive for mobile: stack vertically */
@media (max-width: 900px) {
  .product-modal-content,
  .product-modal-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 98vw;
    padding: 24px 6vw;
    display: grid;
  }
  .product-modal-image {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: unset;
    padding: 12px;
  }
  .product-modal-image img {
    max-width: 180px;
    max-height: 180px;
  }
  .product-modal-details {
    padding: 32px 24px;
  }
  .product-modal-title {
    font-size: 2rem;
  }
}

/* Cart */
.cart-icon {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: linear-gradient(135deg, var(--primary-purple), var(--secondary-purple));
  color: white;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(76, 92, 30, 0.4);
  z-index: 1000;
  transition: all 0.3s ease;
}

.cart-icon:hover {
  transform: scale(1.1);
}

.cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: var(--orange-accent);
  color: white;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}



/* Cart Modal */
.cart-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2000;
}

.cart-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-content {
  background: white;
  border-radius: 25px;
  padding: 30px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e5e7eb;
}

.cart-header h3 {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary-purple);
  margin: 0;
}

.close-cart {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6b7280;
  padding: 5px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-cart:hover {
  background-color: #f3f4f6;
  color: var(--primary-purple);
}

.cart-items {
  margin-bottom: 20px;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #e5e7eb;
}

.cart-item:last-child {
  border-bottom: none;
}

.cart-item-info {
  flex: 1;
}

.cart-item-name {
  font-weight: 600;
  color: var(--dark-text);
  margin-bottom: 5px;
}

.cart-item-price {
  color: #6b7280;
  font-size: 0.9rem;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 15px;
}

.quantity-btn {
  background: var(--primary-purple);
  color: white;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  transition: all 0.3s ease;
}

.quantity-btn:hover {
  background: var(--secondary-purple);
  transform: scale(1.1);
}

.quantity-btn:disabled {
  background: #d1d5db;
  cursor: not-allowed;
  transform: none;
}

.quantity {
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

.remove-item {
  background: #ef4444;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.3s ease;
}

.remove-item:hover {
  background: #dc2626;
  transform: scale(1.05);
}

.cart-total {
  padding: 20px 0;
  border-top: 2px solid var(--primary-purple);
  text-align: center;
}

.total-amount {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary-purple);
  margin-bottom: 20px;
}

.checkout-btn {
  background: linear-gradient(135deg, var(--primary-purple), var(--secondary-purple));
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 25px;
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  width: 100%;
  transition: all 0.3s ease;
}

.checkout-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(139, 92, 246, 0.4);
}

.checkout-btn:disabled {
  background: #d1d5db;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.empty-cart {
  text-align: center;
  padding: 40px 20px;
  color: #6b7280;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.empty-cart i {
  font-size: 3rem;
  margin-bottom: 15px;
  color: #d1d5db;
}

/* Responsive for Cart Modal */
@media (max-width: 600px) {
  .cart-content {
    padding: 18px 6vw 18px 6vw;
    max-width: 98vw;
    border-radius: 16px;
  }
  .cart-header h3 {
    font-size: 1.3rem;
  }
  .cart-item-name {
    font-size: 1rem;
  }
  .remove-item {
    padding: 6px 12px;
    font-size: 0.85rem;
  }
  .checkout-btn {
    font-size: 1rem;
    padding: 12px 0;
  }
}

/* ORDER ONLINE */
.order-btn-custom {
  background-color: #153d14;
  color: #f1ebd4;
  border: none;
  padding: 1rem 2rem;
  font-weight: bold;
  border-radius: 1rem;
  transition: all 0.3s ease;
}

.order-btn-custom:hover {
  background-color: #455746;
  color: white;
}

.order-icon-btn {
  width: 60px;
  height: 60px;
  border-radius: 1rem;
  background-color: #153d14;
  color: #fceec5;
  font-size: 1.5rem;
}

.plain-circle-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #153d14;
}

/* Testimonials Section Styles */
.impact-stories {
  position: relative;
  overflow: hidden;
  padding: 60px 0;
  min-height: 300px;
  background-color: #43594d;
  margin: 20px;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-header h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  color: #ffffff;
}

.section-header p {
  font-size: 1rem;
  color: #ffffff;
}

.carousel-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.carousel-track {
  display: flex;
  /* Use CSS var for duration; JS will set --marquee-duration to match content width */
  animation: scrollLoop var(--marquee-duration, 40s) linear infinite;
  width: max-content;
  align-items: center;
}

.testimonial {
  flex: 0 0 auto;
  width: 220px;
  height: 220px;
  margin: 0 25px;
  background-color: transparent;
  border-radius: 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
  transition: box-shadow 0.2s;
  overflow: hidden;
 
}
.testimonial {
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth scaling and shadow effect */
}


.testimonial:hover {
  transform: scale(1.4); /* Increase size on hover */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Add a shadow effect */
}

.testimonial-header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.testimonial img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  display: block;
  margin: 0 auto;
  box-shadow: 0 2px 12px rgba(67, 89, 77, 0.06);
  background: #f3ebd3;
  border: none;
}
.testimonial-header img {
  transition: none; /* Prevent scaling effect on the image */
}

.testimonial:hover {
  transform: scale(1.4); /* Scale the image along with the parent container */

}

.carousel-track {
  display: flex;
  animation: scrollLoop var(--marquee-duration, 40s) linear infinite; /* Continuous scrolling animation */
  width: max-content;
  align-items: center;
}

.carousel-track:hover {
  animation-play-state: paused; /* Pause the animation when hovered */
}

@keyframes scrollLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Remove text from carousel testimonials */
.testimonial h4,
.testimonial small,
.testimonial p {
  display: none !important;
}

@keyframes scrollLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.carousel-container:hover .carousel-track {
  animation-play-state: paused;
}

/* Gradient Fades */
.fade-left,
.fade-right {
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.fade-left {
  left: 0;
  background: linear-gradient(to right, #43594d 0%, transparent 100%);
}

.fade-right {
  right: 0;
  background: linear-gradient(to left, #43594d 0%, transparent 100%);
}

/* Responsive Design for Testimonials */
@media (max-width: 900px) {
  .carousel-track {
    gap: 10px;
  }
  .testimonial {
    width: 120px;
    height: 120px;
    margin: 0 10px;
    border-radius: 12px;
  }
  .testimonial img {
    border-radius: 12px;
  }
}

@media (max-width: 600px) {
  .impact-stories {
    padding: 30px 0;
  }
  .carousel-container {
    max-width: 98vw;
  }
  .testimonial {
    width: 80px;
    height: 80px;
    margin: 0 6px;
    border-radius: 8px;
  }
  .testimonial img {
    border-radius: 8px;
  }
}

/* Hot/Cold Drinks Toggle Buttons */
#hotDrinksBtn.active,
#coldDrinksBtn.active {
  background: linear-gradient(135deg, var(--primary-purple), var(--secondary-purple));
  color: #fff;
  border: 2px solid var(--primary-purple);
  box-shadow: 0 2px 8px rgba(64, 83, 75, 0.08);
}

   /*============================= */
.main-footer {
  position: relative;
  background-color: #152e22;
  padding: 48px 16px;
  margin: 16px;
  border-radius: 40px;
  color: #fef7e0;
  font-family: 'Georgia', serif;
  display: flex;
  justify-content: center;
  height: auto; /* auto height for responsiveness */
}

.footer-container {
  max-width: 1200px;
  padding: 0 40px;
  width: 100%;
}

/* =============================
   FOOTER GRID LAYOUT
   ============================= */
.footer-content-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 40px;
}

.footer-brand,
.footer-deliver,
.footer-social {
  flex: 1 1 260px;
  min-width: 200px;
  margin: 0;
  text-align: center;
}

.footer-brand-text {
  position: relative;
  text-align: center;
}

.footer-brand-text h1 {
  font-family: "CooperBlack", serif;
  font-size: clamp(2.5rem, 8vw, 8rem);
  font-weight: 900;
  color: rgba(243, 235, 211, 0.15);
  margin: 0;
  line-height: 1;
  letter-spacing: 0.1em;
  user-select: none;
  pointer-events: none;
}

/* =============================
   FOOTER SLOGAN
   ============================= */
.footer-slogan {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 18px auto 0;
  padding: 0 12px;
  position: static;
  text-align: center;
}

.footer-slogan h1,
.footer-slogan h2,
.footer-slogan h3 {
  font-family: "CooperBlack", serif;
  font-weight: bold;
  color: #f3ebd3;
  font-size: clamp(1.6rem, 6vw, 6.5rem);
  line-height: 1;
  margin: 0;
  padding: 0;
  word-break: break-word;
}

/* =============================
   FOOTER CONTENT
   ============================= */
.footer-tagline {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  color: #f3ebd3;
  margin: 0;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #d4c5a9;
  font-size: 1rem;
}

.contact-item i {
  width: 20px;
  color: #f3ebd3;
}

/* =============================
   FOOTER LOGO + ICON
   ============================= */
.footer-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-logo-icon {
  width: clamp(36px, 8vw, 56px);
  height: clamp(36px, 8vw, 56px);
  min-width: 36px;
  min-height: 36px;
  background: #f3ebd3;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2d4a3a;
  font-size: clamp(14px, 3vw, 20px);
}

/* =============================
   FOOTER SOCIAL
   ============================= */
.footer-social h4,
.footer-deliver h4 {
  color: #f3ebd3;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 25px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.social-icons {
  display: flex;
  gap: clamp(8px, 3vw, 20px);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.social-icon {
  width: clamp(36px, 8vw, 56px);
  height: clamp(36px, 8vw, 56px);
  min-width: 36px;
  min-height: 36px;
  background: #f3ebd3;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2d4a3a;
  text-decoration: none;
  font-size: clamp(14px, 3vw, 20px);
  transition: all 0.3s ease;
}

.social-icon:hover {
  background: #554f44;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 20px rgba(243, 235, 211, 0.3);
}

/* =============================
   RESPONSIVE DESIGN
   ============================= */
@media (max-width: 1024px) {
  .footer-content-grid {
    justify-content: center;
  }

  .footer-brand-text h1 {
    font-size: 6rem;
  }
}

@media (max-width: 768px) {
  .footer-container {
    padding: 0 20px;
  }

  .footer-content-grid {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
  }

  .footer-brand,
  .footer-deliver,
  .footer-social {
    flex: 1 1 100%;
    min-width: 100%;
    padding: 0 6px;
  }

  .footer-brand-text h1 {
    font-size: 4rem;
  }

  .footer-slogan h1,
  .footer-slogan h2,
  .footer-slogan h3 {
    font-size: clamp(1.2rem, 8vw, 3rem);
  }

  .main-footer {
    margin: 10px;
    padding: 40px 0 30px;
  }
}

@media (max-width: 480px) {
  .footer-brand-text h1 {
    font-size: 3rem;
  }

  .footer-tagline {
    font-size: 1.1rem;
  }

  .social-icon {
    width: clamp(32px, 12vw, 44px);
    height: clamp(32px, 12vw, 44px);
    font-size: 14px;
  }

  .footer-slogan h1,
  .footer-slogan h2,
  .footer-slogan h3 {
    font-size: clamp(1rem, 10vw, 2.5rem);
  }
}
/* Locations Section Styles */
.locations-hero-header {
  height: 400px;
  background: linear-gradient(135deg, #40584e 0%, #163829 50%, #0f2c20 100%);
  border-radius: 40px;
  margin: 20px;
}

.locations-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

.locations-hero-title {
  font-size: 4rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.locations-hero-subtitle {
  font-size: 1.5rem;
  font-weight: 600;
  opacity: 0.9;
}

.locations-floating-bean {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--amber-600);
  border-radius: 50%;
  opacity: 0.6;
  animation: aboutFloat 3s ease-in-out infinite;
}

.locations-bean-1 {
  top: 20%;
  left: 20%;
  animation-delay: 0s;
}

.locations-bean-2 {
  top: 30%;
  right: 30%;
  animation-delay: 1s;
}

.locations-bean-3 {
  bottom: 20%;
  left: 25%;
  animation-delay: 2s;
}

@keyframes locationsFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}


/* Fix for Locations Section Image */
#locations .container .row > .col-md-6.p-0 {
  display: flex;
  align-items: stretch;
  height: 100%;
  min-height: 220px;
  padding: 0 !important;
}

#locations .container .row > .col-md-6.p-0 img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  max-height: 320px;
  object-fit: cover;
  border-radius: 18px 0 0 18px;
  display: block;
  background: #f8f9fa;
  margin: 0;
  box-shadow: none;
}

/* Profile Dropdown */
.profile-dropdown {
  position: relative;
  display: inline-block;
}

.profile-dropdown .profile-btn {
  position: relative;
  z-index: 2;
}

.profile-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 160px;
  z-index: 3001;
  padding: 8px 0;
  margin-top: 8px;
}
.profile-dropdown-menu.show {
  display: block;
}
.dropdown-item {
  display: block;
  padding: 10px 20px;
  color: #374151;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
.dropdown-item:hover {
  background: #f3f4f6;
}


#pickupLocation, select[name="pickupLocation"] {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1.5px solid #e5e7eb;
    font-family: inherit;
    font-size: 1rem;
    color: #374151;
    background: #fafafa;
    box-sizing: border-box;
    margin-bottom: 12px;
    outline: none;
    transition: border-color 0.2s;
}
#pickupLocation:focus, select[name="pickupLocation"]:focus {
    border-color: #40534b;
}

/* Testimonial Modal Font Style */
.testimonial-image-modal, .testimonial-image-modal * {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 1.1rem;
  color: var(--dark-text);
  font-weight: 500;
}

/* ...existing code... */

/* Force-close button to viewport top-right (override other rules) */
#productModal .product-modal-close-yellow,
.product-modal-close-yellow {
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 12070 !important;
  background: transparent !important;
  border: none !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
  font-size: 28px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #374151 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Slightly smaller on narrow screens */
@media (max-width: 900px) {
  #productModal .product-modal-close-yellow,
  .product-modal-close-yellow {
    top: 10px !important;
    right: 10px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 22px !important;
  }
}