* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'poppins-bold', sans-serif;
}

body {
  background: #f1b8c7;
  padding-top: 90px;
}

/* NAV LOGO */
.nav-logo img {
  height: 60px;        /* 🔥 adjust if needed */
  width: auto;
  display: block;
}

/* ===== FLOATING LOCATION BUTTON ===== */
.location-btn {
  position: fixed;
  top: 45px;  
  transform: translateY(-50%);            /* below navbar */
  right: 6vw;
  width: 56px;
  height: 56px;

  border-radius: 50%;
  background: #e58ea4; /* soft outer circle */
  backdrop-filter: blur(12px);

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

  z-index: 1200;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  
}




/* ===== HOME-ONLY ELEMENT VISIBILITY ===== */
.home-only {
  transition: opacity 0.3s ease;
}

.home-only.hidden {
  opacity: 0;
  pointer-events: none;
}






/* LOGO & LOCATION FADE */
.nav-left,
.nav-right {
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* HIDDEN STATE */
.nav-hidden {
  opacity: 0;
  visibility: hidden;
}

/* keep logo vertically centered */
.nav-left {
  display: flex;
  align-items: center;
}


/* ===== NAVBAR ===== */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 90px;
  padding: 0 6vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background:transparent;
  z-index: 1000;
}

.nav-center {
  background: rgba(255, 255, 255, 0.256);
  backdrop-filter: blur(14px);
  padding: 14px 10px;
  border-radius: 999px;
}

.nav-links {
list-style: none;
  padding: 5px 0;
  margin: 0;
  display: flex;
  gap: 6px;
}


.nav-links a {
  padding: 14px 40px;
  border-radius: 999px;
  color: #7b3a40;
  font-weight: 500;
  text-decoration: none;

  transition: background 0.25s ease, box-shadow 0.25s ease;
  will-change: background; /* 🔥 helps smoothness */
}




.nav-links a:hover {
  background: rgba(255, 255, 255, 0.55);
}
.nav-links a.active {
  background: #ffffff;
  color: #7b3a40;
   border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}


.nav-links a:hover:not(.active) {
  background: rgba(255, 255, 255, 0.55);
}
/* ===== HERO ===== */
.hero {
  min-height: calc(100vh - 90px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-center {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-60px);
}

/* ===== TEXT LAYERS ===== */
.hero-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.hero-text span {
  position: absolute;
  font-size: clamp(64px, 14vw, 180px);
  font-weight: 800;
  letter-spacing: 6px;
  opacity: 0;
  transform: translateY(80px);
  transition:
    transform 1s cubic-bezier(.22,.61,.36,1),
    opacity 0.6s ease;
}

/* 👇 ACTIVE = SLIDE UP */
.hero-text span.active {
  opacity: 1;
  transform: translateY(var(--y));
}

.hero-image-wrap {
  position: relative;
  z-index: 3;
}

.hero-image-wrap::before {
  content: "";
  position: absolute;

  /* 🔥 smaller glow area */
  inset: -8%;

  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.30) 35%,
    rgba(255, 255, 255, 0.12) 55%,
    rgba(255, 255, 255, 0) 70%
  );

  filter: blur(28px); /* 🔥 tighter blur */
  z-index: -1;
}



/* IMAGE stays clean */
.hero-image {
  position: relative;
  z-index: 2;
}



/* ===== POSITION DEFINITIONS (FINAL RESTING SPOTS) ===== */

/* BACK TEXT */
.back-text { z-index: 1; }
.back-text span { color: rgba(255,255,255,0.9); }

/* WELCOME & ICECREAM (UPPER) */
#text-welcome,
#text-icecream {
  --y: -60px;
}

/* TO BELOW ICE CREAM (FILLED) */
.to-fill { z-index: 2; }
.to-fill span {
  color: rgba(255,255,255,0.95);
  --y: 180px;
}

/* ICE CREAM IMAGE */
.hero-image {
  position: relative;
  z-index: 3;
  width: 1200px;
  animation: float 4s ease-in-out infinite;
}

/* TO ABOVE ICE CREAM (OUTLINE) */
.to-outline { z-index: 4; }
.to-outline span {
  color: transparent;
  -webkit-text-stroke: 3px rgba(255,255,255,0.95);
  --y: 180px;
}

/* WORLD BELOW ICE CREAM (FILLED) */
.world-fill { z-index: 2; }
.world-fill span {
  color: rgba(255,255,255,0.95);
  --y: 150px;
}

/* WORLD ABOVE ICE CREAM (OUTLINE) */
.world-outline { z-index: 4; }
.world-outline span {
  color: transparent;
  -webkit-text-stroke: 3px rgba(255,255,255,0.95);
  --y: 150px;
}

/* FRONT TEXT */
.front-text { z-index: 5; }
.front-text span { color: rgba(255,255,255,0.95); }

/* FLOATING ICE CREAM */
@keyframes float {
  50% { transform: translateY(-14px); }
}


.hero-text {
  pointer-events: none;
}


/* CTA */
.hero-btn {
  position: absolute;
  right: 110px;
  bottom: 150px;
  padding: 14px 34px;
  background: #ab3554;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.3s ease; 
}

/* VIEW FLAVOUR BUTTON HOVER */
.hero-btn:hover {
  background: #e08686;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25); /* 🔥 SHADOW */
  transform: translateY(-3px);  
}


/* SOCIAL */

.hero-social {
  position: absolute;        /* 🔥 KEY FIX */
  left: 6vw;                 /* left alignment */
  bottom: 150px;  
   z-index: 20;          /* ABOVE text & image */
  pointer-events: auto;           /* 🔥 MOVE DOWN HERE */
  display: flex;
  gap: 28px;
}

.social-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  text-decoration: none;
  transition: 0.3s ease;
}

/* Brand Colors */
.social-btn.facebook { background: #1877f2; }
.social-btn.instagram { 
  background: radial-gradient(circle at 30% 107%, 
  #fdf497 0%, #fdf497 5%, #fd5949 45%, 
  #d6249f 60%, #285aeb 90%);
}
.social-btn.whatsapp { background: #25d366; }

/* Hover Effect */
.social-btn:hover {
  transform: scale(1.15);
  box-shadow: 0 6px 15px rgba(0,0,0,0.25);
}


/* HIDE HAMBURGER ON DESKTOP */
.hamburger {
  display: none;
}
@media (max-width: 768px) {
  .hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


/* ===== OUR SCOOP ===== */
.our-scoop {
  position: relative;
  padding: 140px 6vw;
  display: flex;
  align-items: center;
  gap: 2.5vw;
  background: #e08fa0;
  overflow: hidden;
  min-height: 700px; /* adjust slightly if needed */
}

/* 🔒 Prevent background expansion */
.scoop-text-wrap {
  min-height: 240px; /* space for expanded text */
}


/* LEFT */
.scoop-left {
  position: relative;
  width: 360px;
  height: 420px;
}

/* CENTER CONTENT */
.scoop-content {
  position: relative;

  max-width: 620px;        /* 🔥 THIS is the key fix */
  margin-right: 420px;     /* 🔥 reserve space for cake */

  padding-bottom: 60px;   /* keep your breathing room */
}



.scoop-content h2 {
transform: translateY(-40px); /* 🔼 move up */
font-size: 90px;
margin-bottom: 20px;
white-space: nowrap;   /* 🔥 keeps OUR SCOOP on one line */
 /* 🔥 Gradient text */
background: linear-gradient(
    90deg,
    #f7d1dc,
    #ffc2c2
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;

}



.scoop-content p {
  color: #4e1a3d;
  max-width: 100%;
  line-height: 1.8;
  word-wrap: break-word;
  margin-bottom: 30px;
   padding-right: 20px;
   transform: translateX(20px);
  
}

.scoop-btn {
  display: inline-block;
  padding: 14px 32px;
  background: #ab3554;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  margin-top: 10px;   /* adjust gap cleanly */


}
/* READ MORE BUTTON HOVER */
.scoop-btn:hover {
  background: #e08fa0;                 /* 🔴 change anytime */
 
  transform: translateY(-3px);
}


/* RIGHT CAKE */
.scoop-cake {
  position: absolute;
  right: -170px;
  top: 55%;
transform: translateY(-43%);

}

.scoop-cake img {
  width: 600px;     /* 🔥 bigger */
  height: auto;
   transform: scaleY(1.1);
    opacity: 0.9;
}


/* ================================
   OUR SCOOP – SINGLE PNG
================================ */

.scoop-left {
  position: relative;
  width: 420px;
  height: 520px;
  flex-shrink: 0;
}

.scoop-left-png {
  width: 100%;
  height: auto;
  display: block;
}
/* ================================
   FLOATING ANIMATION – LEFT PNG
================================ */

.scoop-left-png {
  animation: floatUpDown 4s ease-in-out infinite;
  will-change: transform;
}

@keyframes floatUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-16px);
  }
  100% {
    transform: translateY(0);
  }
}




/* SECTION */
.we-serve {
  background: #ab3554;
  padding: 0px 0vw px; /* EXTRA bottom space */
}

/* TITLE */
.we-serve-title {
  text-align: center;
  font-size: 70px;
  font-weight: 800;
  margin-bottom: 90px;

  /* TEXT GRADIENT */
  background: linear-gradient(90deg, #f7d1dc, #ffc2c2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}


.serve-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}




/* CARD */
.serve-card {
  width: 30%;
  text-align: center;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 🔥 pushes image to bottom */
}


.serve-card img {
  height: 380px;
  object-fit: contain;
  margin-top: auto;
}


.serve-card h3 {
  color: #fff;
  font-size: 50px;
  margin-bottom: -10px;
  letter-spacing: 1px;
  font-family: 'Chewy', cursive;
  animation: floatText 3.5s ease-in-out infinite;

}
@keyframes floatText {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(0);
  }
}


/* IMAGE COMMON */
.serve-card img {
  display: block;
  margin: 0 auto;
  height: auto;
}


.img-pastry {
  max-width: 450px;
}



/* ================= FLAVOURS ================= */
.flavours {
  background: #f1b8c7;
  padding: 120px 6vw;
  text-align: center;
}

.flavours-title {
  font-size: 90px;
  font-weight: 900;
  letter-spacing: 3px;
  margin-bottom: 80px;

  background: linear-gradient(90deg, #e77b8c, #c94b63);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.flavours-grid {
  display: flex;
  justify-content: center;
  gap: 80px;
  flex-wrap: wrap;
}

/* CARD */
.flavour-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* CIRCLE */
.flavour-circle {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: #f76c84;
  position: relative;
  overflow: visible; /* ✅ FIX */
}



/* CAKES & PASTRIES */
/* CAKES & PASTRIES */
.flavour-circle.cake {
  display: flex;
  align-items: center;
  justify-content: center;
    padding-bottom: 10px;
}

/* Cake & pastry images */
.flavour-circle.cake img {
  width: 200px;              /* 🔥 Bigger */
  height: auto;
  max-height: 200px;
  margin-top: 30px;
  object-fit: contain;

transform: translateY(-30px);
  animation: floatIce 4s ease-in-out infinite;
}

/* DIFFERENT BACKGROUNDS */
.flavour-circle.vanilla { background:#f46b85; }

/* ICE CREAM IMAGE */
.flavour-circle img {
  width: 130px;
  transform: translateY(-30px);
  animation: floatIce 4s ease-in-out infinite;
}

/* PRICE TAG */
.price {
  position: absolute;
  top: 30px;
  right: -20px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}

.price.grey { background: #fc5a5a; }

/* NAME */
.flavour-card h3 {
  margin-top: 24px;
  font-size: 22px;
  color: #fff;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}

/* FLOAT ANIMATION */
@keyframes floatIce {
  50% {
    transform: translateY(-43px);
  }
}
/* ================= FLAVOUR SLIDER ================= */

/* ===== FLAVOUR SLIDER (SCROLL BASED) ===== */
/* ===== FLAVOURS SLIDER (NO END GAP) ===== */
.flavours-slider {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scroll-behavior: auto;
}

.flavours-slider:active {
  cursor: grabbing;
}

.flavours-track {
  display: flex;
  gap: 120px;
  width: max-content;
  padding: 40px 120px; /* 🔥 move padding here */
  user-select: none;
}

/* hide scrollbar */
.flavours-slider::-webkit-scrollbar {
  display: none;
}




.flavours-track.dragging {
  cursor: grabbing;
}

/* PAUSE ON HOVER */
.flavours-slider:hover .flavours-track {
  animation-play-state: paused;
}

/* CARD SIZE FIX */
.flavour-card {
  min-width: 260px;
  text-align: center;
}

/* SLIDE ANIMATION */
@keyframes slideLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}


/* ================= CONTACT ================= */

.contact {
  background: #d7869b;
  min-height: 100vh;
  padding: 70px 6vw 100px; /* 🔥 reduced top padding */
  position: relative;
}



/* TITLE */
.contact-title {
  font-size: 90px;
  font-weight: 900;

  /* 🔥 GRADIENT TEXT */
  background: linear-gradient(
    90deg,
    #f7d1dc,
    #ffc2c2
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;

  /* 🔥 POSITION ADJUSTMENTS */
  margin-top: 20px;          /* move title lower */
  margin-left: 10px;        /* move towards centre */

  margin-bottom: 60px;
}


/* WRAPPER */
.contact-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* 🔥 important */
  margin-top: -10px;
}


/* LEFT */
.contact-left {
  width: 55%;
  position: relative;
  display: flex;
  align-items: center;
}


.contact-details {
  margin-left: 220px;      /* space for ice-cream */
  margin-top: 30px;

  max-width: none;         /* 🔥 IMPORTANT */
  width: 100%;             /* fill left column */

  color: #4e1a3d;
}




.contact-desc {
  margin-bottom: 20px;
  line-height: 1.7;
}

/* CONTACT DETAILS – CONSISTENT SPACING */
.contact-details p {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 18px;   /* 🔥 SAME GAP FOR ALL */
}


.direction-btn {
  margin-top: 20px;
  padding: 14px 30px;
  background: #ab3554;
  color: #fff;
  border: none;
  border-radius: 999px;        /* 🔥 CURVE */
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;   /* 🔥 SMOOTH */
  cursor: pointer;
}

/* HOVER EFFECT */
.direction-btn:hover {
  background: #e08fa0;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25); /* 🔥 SHADOW */
  transform: translateY(-3px);               /* 🔥 LIFT */
}


/* ICE CREAM */
.contact-icecream {
  position: absolute;
  left: -220px;          /* slightly more outside */
  top: -120px;            /* closer to heading */
  width: 420px;          /* 🔥 BIGGER IMAGE */
  z-index: 1;
}




/* RIGHT */
.contact-right {
  width: 38%;
  margin-top: -40px; /* 🔥 aligns with CONTACT US */
}


.contact-right h3 {
  font-size: 42px;
  color: #4e1a3d;
  margin-bottom: 30px;
  margin-left: 50px;
}

/* FORM */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 16px;
  margin-bottom: 18px;
  border: none;
  background: rgba(255,255,255,0.6);
  outline: none;
  border-radius: 0; /* 🔥 NO CURVE */
}

.contact-form textarea {
  height: 130px;
  resize: none;
}

.contact-form button {
  padding: 14px 44px;
  background: #ab3554;
  color: #fff;
  border: none;
  border-radius: 999px;        /* 🔥 CURVE */
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* HOVER EFFECT */
.contact-form button:hover {
  background: #e08fa0;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25); /* 🔥 SHADOW */
  transform: translateY(-3px);               /* 🔥 LIFT */
}


/* FIX ANCHOR SCROLL OFFSET */


html {
  scroll-behavior: smooth;
}

/* FIX FOR FIXED NAVBAR ANCHOR ISSUE */
.contact-details p i,
.contact-details p svg {
  margin-right: 10px;
}
 /* ================= FOOTER ================= */

.site-footer {
  background: #f0b0c1;
  height: 180px;              /* 🔥 FIXED FOOTER HEIGHT */
  position: relative;
  overflow: hidden;           /* 🔥 CLIP EXTRA IMAGE */
}

.footer-container {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 6vw;
}


/* LEFT */
.footer-left img {
  width: 150px;
}

/* CENTER */
.footer-center {
  text-align: left;
  margin-left: 40px;          /* 🔥 move near logo */
}

.footer-links {
  list-style: none;
  display: flex;
  gap: 60px;                  /* 🔥 tighter spacing */
  margin-bottom: 12px;
}

.footer-links a {
  text-decoration: none;
  color: #ab3554;
  font-weight: 500;
  font-size: 15px;
}


.footer-copy {
  color: #ab3554;
  font-size: 14px;
  margin-bottom: 6px;
}

.footer-credit {
  color: #ab3554;
  font-size: 14px;
}


/* RIGHT */
.footer-right {
  position: absolute;
  right: 40px;
  top: 0;          /* 🔥 TOUCH TOP */
  bottom: 0;       /* 🔥 TOUCH BOTTOM */
  display: flex;
  align-items: flex-end;
}


.footer-right img {
  height: 185px;    /* 🔥 BIGGER than footer */
  width: auto;
  display: block;
 }

.location-btn {
  width: 50px;
  height: 50px;
  background: #e58ea4;
  color: #6a0202;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  text-decoration: none;

  transition: 
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;

  will-change: transform;
}

.location-btn:hover {
  background: #fff;

  transform: translateY(-19px); /* 🔥 lift, not grow */
}

.contact-box {
  color: #2b1b1f;
  max-width: 420px;
}

.contact-text {
  margin-bottom: 18px;
  line-height: 1.6;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

/* Icon container */
.contact-item .icon {
  width: 36px;
  height: 36px;
  background: rgba(230, 57, 70, 0.15);
  color: #64181e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

/* Text */
.contact-item .text {
  line-height: 1.5;
  font-size: 15px;
}

/* Button */
.direction-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 24px;
  background: #a8324a;
  color: #fff;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s ease;
}

.direction-btn:hover {
  background: #8f283d;
}
  
/* ================= FOOTER CREDIT LINK ================= */
.site-footer .footer-credit a,
.site-footer .footer-credit a:visited,
.site-footer .footer-credit a:hover,
.site-footer .footer-credit a:active {
  color: inherit !important;        /* same pink color */
  font-weight: 700 !important;      /* bold */
  text-decoration: none !important; /* remove underline */
}



/* =========================================================
   MOBILE RESPONSIVE – CLEAN & FINAL
   Breakpoint: max-width 768px
========================================================= */
@media (max-width: 768px) {

  /* ================= GLOBAL FIX ================= */
  html, body {
    overflow-x: hidden;
  }

  section,
  header,
  footer {
    width: 100%;
    overflow-x: hidden;
  }

  /* remove desktop side padding */
  .navbar,
  .hero,
  .our-scoop,
  .we-serve,
  .flavours,
  .contact,
  .site-footer {
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }

  /* ================= NAVBAR ================= */
  .navbar {
    
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none
  }

  .nav-logo img {
    height: 55px;
  }

.hamburger {
  width: 44px;
  height: 44px;
  padding: 8px;

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

  font-size: 26px;
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
  .location-btn {
    display: none !important;
  }

  /* hide desktop nav */
  .nav-center {
    display: none;
  }

    .nav-center::before,
  .nav-center::after {
    content: none !important;
    display: none !important;
  }

  /* Ensure ONLY menu card is visible */
  .nav-center.active {
    background: transparent !important;
  }

  /* show mobile nav */
  .nav-center.active {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 1000;
  }

  .nav-links {
    width: 92%;
    background: #ffffff;
    border-radius: 14px;
    padding: 28px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .nav-links a {
    padding: 12px 28px;
    border-radius: 999px;
    font-size: 18px;
    color: #7b3a40;
  }

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

  .hero-image {
    width: 600px;        /* BIGGER than screen */
    max-width: none;   
    translate: 0 -70px;   /* 🔑 THIS IS THE KEY */
  }



  /* 🔥 ALLOW IMAGE TO OVERFLOW LIKE DESKTOP */
  .hero-image-wrap {
    overflow: visible;
  }

  /* OPTIONAL: lift image slightly */
  .hero-center {
    top: 40%;
  }


  /* BACK TEXT — stays behind ice cream */
  .back-text {
    z-index: 1;
  }

  /* IMAGE */
  .hero-image-wrap {
    z-index: 3;
  }

  /* FILLED TEXT (BEHIND IMAGE) */
  .to-fill,
  .world-fill {
    z-index: 2;
  }

  /* OUTLINE TEXT (IN FRONT OF IMAGE) */
  .to-outline,
  .world-outline {
    z-index: 4;
  }

    /* ================= MOBILE TEXT SAFETY & ALIGNMENT ================= */

  /* Prevent text touching screen edges */
  .hero-text {
    padding: 0 8vw;          /* 🔥 side breathing space */
    box-sizing: border-box;
  }

  .hero-text span {
    max-width: 100%;
    text-align: center;
    line-height: 1;
  }

  /* ================= FORCE ICE CREAM ON ONE LINE ================= */

  #text-icecream {
    
    white-space: nowrap;    /* 🔥 keeps ICE CREAM together */
  }

  /* ================= MOBILE Y POSITIONS (BALANCED) ================= */

  #text-welcome {
    --y: -150px;             /* centered, not touching edges */
  }

  #text-icecream {
    --y: -150px;              /* visually centered with welcome */
  }

  .to-fill span,
  .to-outline span {
    --y: -5x;              /* touches glass */
  }

  .world-fill span,
  .world-outline span {
    --y: -5px;             /* touches glass */
  }
 
  #text-welcome {
    font-size: 58px;        /* 👈 adjust this freely */
    letter-spacing: 2px;
  }

 #text-icecream {
    font-size: 55px;        /* 👈 slightly bigger than WELCOME */
    letter-spacing: 2px;
    white-space: nowrap;
 }

 .to-fill span,
  .to-outline span {
    font-size: 58px;        
  }
 .world-fill span,
  .world-outline span {
    font-size: 55px;
    letter-spacing: 2px;
  }

 

  /* HERO must control absolute children */

  .hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }



  /* MOBILE CTA BLOCK */

 .mobile-cta {
    position: absolute;   /* 🔥 IMPORTANT */
    width: 100%;
    margin-top: 450px;     /* space from ice-cream */
    display: flex;
    justify-content: center;
    background: transparent;
    transform: translateX(-1%);
 }


  /* STACK */
  .mobile-cta-wrapper {
  display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;             /* 🔥 minimal gap */
    padding-bottom: 24px; /* breathing room */
  }

  /* BUTTON — NO MARGINS ALLOWED */
  .mobile-cta-wrapper .hero-btn {
    margin: 0 !important;
  
  }

  /* SOCIAL ROW */
  .mobile-social-icons {
    display: flex;
       
    gap: 12px;
    margin: 0 !important;
    padding: 0;
   
  }

  /* KILL ALL ICON MARGINS */
  .mobile-social-icons a,
  .mobile-social-icons i {
    margin: 0 !important;
    padding: 0;
  }

/* ================= OUR SCOOP – MOBILE FORCE RESET ================= */

.our-scoop {
  padding: 60px 6vw 70px;
  display: block;                 /* kill desktop flex */
  text-align: center;
  padding-top: 30px !important; 
}

/* 🔥 KILL DESKTOP POSITIONING COMPLETELY */
.scoop-content {
  margin: 0 auto !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100%;
  transform: none !important;
  text-align: center;
}

/* === HARD CENTER SCOOP IMAGE === */

.scoop-left {
  width: 220px;
  margin: 0 auto !important;     /* center container */
  height: auto !important;
  min-height: 0 !important;
  text-align: center;            /* fallback centering */
}

/* IMAGE ITSELF */
.scoop-left-png {
  display: block;                /* 🔥 KEY */
  margin: 0 auto;                /* 🔥 KEY */
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: contain;
  animation: scoopFloat 4s ease-in-out infinite;
  will-change: transform;
}
@keyframes scoopFloat {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(0, -12px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}


/* HEADING */
.scoop-content h2 {
  margin-top: 16px !important;  
  margin-bottom: 10px !important;
  font-size: 42px;
  transform: none !important;
  /* === Match OUR SCOOP size with WE SERVE === */


  font-size: 48px !important;   /* same visual weight as WE SERVE */
  font-weight: 800;
  letter-spacing: 0px;


}

/* TEXT */
.scoop-content p {
   margin-top: 0 !important;
  margin-bottom: 16px !important;
  padding: 0 10px;
  font-size: 14px;
  line-height: 1.6;
  transform: none !important;
}

/* BUTTON */
.scoop-btn {
  padding: 12px 26px;
  font-size: 14px;
    margin-top: 0 !important;
}

/* REMOVE DESKTOP CAKE */
.scoop-cake {
  display: none !important;
}

  .we-serve {
    padding-top: 30px;   /* 🔥 lower top */
    padding-bottom: 0px; /* 🔥 tighter bottom */
  }

  .we-serve-title {
    font-size: 42px;
    margin-bottom: 20px;
  }

  .serve-row {
    margin-bottom: 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
  }

  .serve-card {
    width: 30%;
     min-height: auto;              /* 🔥 REMOVE desktop height */
    justify-content: flex-start; 
  }

  .serve-card h3 {
    font-size: 20px;
    margin-bottom: 6px;
  }

  .serve-card img {
    max-width: 100px;
  }

  /* ================= FLAVOURS ================= */
  .flavours-title {
    font-size: 48px;
  }

  .flavours-track {
    gap: 40px;
    padding: 40px;
  }

  .flavour-card {
    min-width: 160px;
  }

  .flavour-circle {
    width: 150px;
    height: 150px;
  }

  .flavour-circle img,
  .flavour-circle.cake img {
    width: 70px;

  }

    .flavour-circle {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;

  }

 .flavour-circle img {
  height: 150px;        /* 🔥 primary sizing */
  width: auto;
  max-width: none;    /* 🔥 allow wide images to grow */
  object-fit: contain;
  
}
 .flavour-circle img {
    animation: floatSame 5s ease-in-out infinite;
    will-change: transform;
  }




 .flavour-circle img,
.flavour-circle.cake img {
  animation: floatSame 5s ease-in-out infinite;
}

 .flavour-circle.cake img {
  transform: translateY(0); /* 🔥 releases image for animation */
}
 

  .flavour-circle.cake img {
    width: auto !important;
    height: 90px !important;   /* 👈 THIS makes cake & pastry bigger */
    max-height: none !important;
    margin-top: 0 !important;
    
  }

  /* NORMAL IMAGES */
  .flavour-circle img {
    height: 150px;
    width: auto;
    object-fit: contain;
  }

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


  /* ================= CONTACT ================= */
   .contact-title {
    font-size: 48px;              /* 🔥 smaller like other sections */
    white-space: nowrap;          /* 🔥 force one line */
    text-align: center;
    margin: 0 auto 32px;          /* spacing below title */
    line-height: 1.1;
  }

   .contact-icecream {
    left: -150px;                  /* 🔥 move INSIDE screen */
    top: -20px;
    width: 260px;                 /* 🔥 smaller */
    opacity: 0.55;                /* 🔥 transparent */
    pointer-events: none;
  }
  .contact-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .contact-left,
  .contact-right {
    width: 100%;
    margin: 0;
  }

  /* 🔥 RESET DESKTOP OFFSETS */
  .contact-details {
    margin-left: 0 !important;
    margin-top: 20px;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;      /* 🔥 CENTER BLOCK */
    text-align: center;
  }

  /* ✅ ICON + TEXT ROWS (CORRECT ELEMENT) */
.contact-details .contact-item {
  display: grid;                        /* 🔥 key */
  grid-template-columns: 34px auto;     /* icon + text */
  align-items: center;
  column-gap: 12px;

  max-width: 320px;                     /* center block */
  margin: 0 auto 14px;
}

/* Icon column */
.contact-details .contact-item .icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Text next to icon */
.contact-details .contact-item .text {
  text-align: left;
  line-height: 1.4;
}


  /* ICON + TEXT ROWS */
  .contact-details p {
    display: flex;
    align-items: center;
    justify-content: center;  /* 🔥 CENTER ICON + TEXT */
    gap: 10px;
    margin-bottom: 14px;
  }

  /* REMOVE ICON LEFT PUSH */
  .contact-details p i,
  .contact-details p svg {
    margin-right: 0 !important;
   
   
  }

  /* CENTER DIRECTION BUTTON */
  .direction-btn {
    display: block;
    margin: 20px auto 030px;
  }

  /* RIGHT SIDE TITLE FIX */
  .contact-right h3 {
    margin-left: 0 !important;
    text-align: center;
     margin-top: 0;
  }

  
  




  /* ================= FOOTER – MOBILE (DESKTOP STYLE SMALL) ================= */


  
.site-footer {
  height: auto;                 /* 🔥 remove fixed height */
  padding: 16px 0;
  overflow: hidden;
}

/* KEEP GRID LAYOUT */
.footer-container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 4vw;               /* tighter than desktop */
}

/* LOGO */
.footer-left img {
  width: 90px;                  /* 🔽 smaller logo */
}

/* CENTER CONTENT */
.footer-center {
  margin-left: 16px;
}

/* LINKS */
.footer-links {
  gap: 24px;                    /* 🔽 tighter gap */
  margin-bottom: 6px;
}

.footer-links a {
  font-size: 13px;
}

/* TEXT */
.footer-copy,
.footer-credit {
  font-size: 12px;
  line-height: 1.4;
}

/* Hide right cake image on mobile */
.footer-right {
  display: none;
}

}

/* ================= VISIBILITY CONTROL ================= */

/* DESKTOP: hide MOBILE CTA */
@media (min-width: 769px) {
  .mobile-cta {
    display: none !important;
  }
}

/* MOBILE: hide DESKTOP CTA */
@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }
}


/* 🔥 MOBILE: prevent any visual change after tap */
@media (hover: none) and (pointer: coarse) {

  .hero-btn,
  .direction-btn,
  .contact-form button,
  .scoop-btn {
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }

  .hero-btn:hover,
  .hero-btn:active,
  .hero-btn:focus,
  .hero-btn:focus-visible,

  .direction-btn:hover,
  .direction-btn:active,
  .direction-btn:focus,
  .direction-btn:focus-visible,

  .contact-form button:hover,
  .contact-form button:active,
  .contact-form button:focus,
  .contact-form button:focus-visible,

  .scoop-btn:hover,
  .scoop-btn:active,
  .scoop-btn:focus,
  .scoop-btn:focus-visible {
    background: #ab3554 !important;   /* 🔥 original button bg */
    color: #ffffff !important;        /* 🔥 original text color */
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
  }
}


/* ================= TABLET = DESKTOP STYLE ================= */
@media (min-width: 769px) and (max-width: 1024px) {
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* 🔥 non-negotiable */
}

  /* ================= GLOBAL ================= */
  .navbar,
  .hero,
  .our-scoop,
  .we-serve,
  .flavours,
  .contact,
  .site-footer {
    padding-left: 4vw;
    padding-right: 4vw;
  }

  /* ================= NAVBAR ================= */
  .nav-logo img {
    height: 56px;
  }

  .nav-links a {
    padding: 12px 30px;
    font-size: 15px;
  }

  /* ================= HERO ================= */
  .hero-center {
    transform: translateY(-40px);
  }

 .hero-image {
    width: 1100px;     /* BIGGER than screen */
    max-width: none;   
    translate: 0 -70px;   /* 🔑 THIS IS THE KEY */
  }

#text-icecream {
    font-size: 140px;  /* 👈 slightly bigger than WELCOME */
    letter-spacing: 2px;
    white-space: nowrap;
}



  
  #text-welcome,
  #text-icecream {
    --y: -50px;
  }

  .to-fill span,
  .to-outline span {
    --y: 150px;
  }

  .world-fill span,
  .world-outline span {
    --y: 130px;
  }

  .hero-btn {
    right: 70px;
    bottom: 120px;
  }

  .hero-social {
    left: 4vw;
    bottom: 120px;
  }

  /* ================= OUR SCOOP ================= */
  .our-scoop {
    padding: 110px 4vw;
    min-height: 620px;
  }

  .scoop-left {
    width: 300px;
    height: 360px;
  }

  .scoop-content {
    max-width: 520px;
    margin-right: 360px;
  }

  .scoop-content h2 {
    font-size: 72px;
  }

  .scoop-content p {
    font-size: 15px;
  }

  .scoop-cake img {
    width: 520px;
  }

  /* ================= WE SERVE ================= */
  .we-serve-title {
    font-size: 60px;
    margin-bottom: 60px;
  }

  .serve-card {
    min-height: 440px;
  }

  .serve-card h3 {
    font-size: 40px;
  }

  .serve-card img {
    height: 250px;
  }

  /* ================= FLAVOURS ================= */
  .flavours {
    padding: 100px 4vw;
  }

  .flavours-title {
    font-size: 72px;
  }

  .flavour-circle {
    width: 220px;
    height: 220px;
  }

  .flavour-circle img {
    width: 120px;
  }

  .flavour-circle.cake img {
    width: 170px;
  }

  /* ================= CONTACT ================= */
  .contact {
      min-height: auto;     
  padding: 80px 6vw 80px;
  }

  .contact-title {
    font-size: 72px;
  }

  .contact-left {
    width: 58%;
  }

  .contact-right {
    width: 38%;
  }

  .contact-icecream {
    width: 340px;
    left: -160px;
  }

  /* ================= FOOTER ================= */
  .footer-container {
    padding: 0 4vw;
  }

  .footer-right img {
    height: 180;
  }
}

@media (max-width: 768px) {
 /* 🔥 FORCE CENTER VIEW FLAVOUR BUTTON ON MOBILE */
.hero-btn {
  position: relative !important;
  right: auto !important;
  left: 50% !important;
  bottom: 80%!important;
  transform: translateX(-50%) !important;
  margin: 0 auto;
}
}

/* ================= MOBILE: CONTACT ICON STRAIGHT ALIGN ================= */
@media (max-width: 768px) {

  /* Force vertical list */
  .contact-details {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Each row: icon + text in straight line */
  .contact-details .contact-item {
    display: grid;
    grid-template-columns: 36px auto; /* 🔥 fixed icon column */
    column-gap: 14px;
    align-items: center;
 transform: translateX(45px);
    max-width: 320px;      /* keeps everything centered */
    width: 100%;
    margin: 0 auto 14px;
  }

  /* Icon stays perfectly aligned */
  .contact-details .contact-item .icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* Text starts from same line */
  .contact-details .contact-item .text {
    text-align: left;
    line-height: 1.4;
  }
}