/*
Theme Name: Icecream Labs Theme
Author: Sivakumar
Version: 2.0 (Premium UI)
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  overflow-x: hidden; /* 🔥 prevent side scroll */
}
/* RESET */
body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  background: #f5d6de;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;

  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.7) 2px, transparent 3px),
    radial-gradient(circle, rgba(255, 255, 255, 0.5) 1.5px, transparent 3px);

  background-size:
    80px 80px,
    120px 120px;

  opacity: 0.6;

  z-index: 0;
  pointer-events: none;
}
/* ⭐ MULTIPLE STARS USING BOX-SHADOW */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;

  width: 12px;
  height: 12px;

  background: yellow;

  clip-path: polygon(
    50% 0%,
    60% 40%,
    100% 50%,
    60% 60%,
    50% 100%,
    40% 60%,
    0% 50%,
    40% 40%
  );

  box-shadow:
    100px 200px yellow,
    300px 150px white,
    500px 400px white,
    700px 100px yellowgreen,
    900px 300px white,
    1200px 200px red,
    150px 500px white,
    400px 600px blue,
    800px 550px white,
    1100px 650px red,
    200px 800px violet,
    600px 900px white,
    1000px 850px rebeccapurple;

  animation: twinkle 5s infinite ease-in-out;

  z-index: 0;
  pointer-events: none;
}
.star-bg {
  position: fixed;
  width: 12px;
  height: 12px;
  background: white;

  clip-path: polygon(
    50% 0%,
    60% 40%,
    100% 50%,
    60% 60%,
    50% 100%,
    40% 60%,
    0% 50%,
    40% 40%
  );

  animation: twinkle 5s infinite ease-in-out;
}
@keyframes twinkleStars {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.4);
  }
}
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* NAVBAR */
.navbar {
  width: 100%;
  max-width: 1200px;

  margin: 20px auto;
  padding: 21px 21px;

  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%); /* ✅ CENTER PERFECT */

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

  background: white;
  border-radius: 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  z-index: 100;
}
/* LOGO BIG WITHOUT INCREASING HEADER */
.logo img {
  height: 55px; /* keep original */
  width: auto;
  object-fit: contain;

  transform: scale(1.8); /* increase visually */
  transform-origin: left center;

  /* filter: drop-shadow(0 5px 10px rgba(0,0,0,0.1)); */
}

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

.menu a {
  text-decoration: none;
  color: #333;
  font-weight: 700;
}

.nav-buttons {
  display: flex;
  align-items: center;

  gap: 30px;
}

/* NAV BUTTONS FIX */
.nav-buttons {
  display: flex;
  align-items: center;
  gap: 20px; /* 🔥 reduce gap (was 30px) */
}

/* COMMON BUTTON STYLE */
.btn-outline {
  background: white;
  color: #ff4da6 !important;
  border: 1px solid #ff4da6;
  padding: 12px 18px; /* 🔥 increase size */
  border-radius: 999px;
  font-weight: 600 !important;

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

  height: 40px; /* 🔥 SAME HEIGHT */
  min-width: 120px; /* 🔥 uniform width feel */

  cursor: pointer;
  text-decoration: none !important;
  /* transition: 0.2s ease; */
}

.btn-gradient {
  background: #ff4da6 !important;
  color: white;

  padding: 12px 18px; /* 🔥 increase size */
  border-radius: 999px;
  font-weight: 600 !important;

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

  height: 40px; /* 🔥 SAME HEIGHT */
  min-width: 120px; /* 🔥 uniform width feel */

  border: none;
  cursor: pointer;
  text-decoration: none !important;
  /* transition: 0.2s ease; */
}

/* ICON ALIGNMENT */
.btn-outline i {
  margin-right: 6px;
  font-size: 14px;
}
.btn-gradient i {
  margin-right: 6px;
  font-size: 14px;
}

/* DRIP IMAGE FIX */
.drip {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: auto;

  object-fit: contain;

  transform: translateY(-42%); /* ✅ instead of fixed top */

  z-index: 5;
  pointer-events: none;
}
/* Content above drip */
.hero-content,
.hero-image {
  position: relative;
  z-index: 2;
}

/* HERO SECTION */
.hero {
  width: 100%;
  max-width: 1200px;
  position: relative;
  margin: 120px auto 0;
  padding: 130px 40px 60px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(255, 255, 255, 0.5),
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(255, 255, 255, 0.3),
      transparent 50%
    ),
    linear-gradient(
      135deg,
      #6feeffe2 0%,

      #b884fcf7 50%,
      #f67affa4 60%,
      #ffb3d9f2 90%
    );
  overflow: hidden;
  border-radius: 0px 0px 30px 30px;
}
/* LIGHT GLOW */
/* ✨ GLOWING STARS */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image:
    radial-gradient(circle, #ffffff 3px, transparent 4px),
    radial-gradient(circle, #ffd700 2px, transparent 4px),
    radial-gradient(circle, #ff4da6 2px, transparent 4px);

  background-size:
    100px 100px,
    140px 140px,
    120px 120px;

  opacity: 0.7;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));

  pointer-events: none;
}

/* ✨ STRONG SPARKLES */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;

  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 2px, transparent 3px),
    radial-gradient(circle, rgba(255, 255, 255, 0.7) 1.5px, transparent 3px),
    radial-gradient(circle, rgba(255, 255, 255, 0.8) 2.5px, transparent 4px);

  background-size:
    60px 60px,
    80px 80px,
    120px 120px;

  opacity: 0.9;
  animation: sparkleMove 6s linear infinite;

  pointer-events: none;
}

/* HERO CONTENT */
.hero-content {
  width: 50%;
  z-index: 2;
}

.hero-title {
  font-family: "Baloo 2", cursive;
  font-size: 60px;
  line-height: 1.1;
}

/* BLUE TEXT */
.hero-content .top-text {
  color: #1d4ed8; /* solid blue */

  -webkit-text-stroke: 1px #ffffff;

  text-shadow:
    0 4px 0 #ffffff,
    0 6px 12px rgba(0, 0, 0, 0.15);
  font-size: 55px;
}

.hero-content .bottom-text {
  color: #ff2d95; /* solid pink */

  -webkit-text-stroke: 1px #ffffff;

  text-shadow:
    0 4px 0 #ffffff,
    0 8px 16px rgba(255, 45, 149, 0.35);

  font-size: 53px;
}
.hero-content p {
  margin-top: 10px;
  font-size: 16px;
  color: #444;
  font-style: italic;
}

/* BUTTONS */
.hero-buttons {
  margin-top: 35px;
  display: flex;
  align-items: center;
  gap: 15px;
}
.btn-primary {
  /* background: linear-gradient(90deg, #ff4da6, #ff7eb3); */
  background: #ff4da6;
  border: none;
  color: white !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 45px; /* 🔥 SAME HEIGHT */
  padding: 10px 22px; /* equal spacing */

  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;

  text-decoration: none !important;
  font-size: 14px;
}

.btn-secondary {
  border: 1px solid #2563eb;
  background: white;
  color: #ff4da6 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 45px; /* 🔥 SAME HEIGHT */
  padding: 10px 22px; /* equal spacing */

  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;

  text-decoration: none !important;
}

/* HERO IMAGE */

/* HERO IMAGE RIGHT SIDE FIX */
.hero-image {
  width: 50%;
  display: flex;
  justify-content: flex-end; /* push to right */
  align-items: center;
  position: relative;
}

/* IMAGE FULL FIT */
.hero-img {
  width: 100%;
  max-width: 650px; /* control size */
  height: auto;
  object-fit: contain;

  z-index: 2;
  /* animation: float 4s ease-in-out infinite; */
  animation: floatY 4s ease-in-out infinite;

  transform: rotate(0deg);
  /* filter: drop-shadow(0 30px 60px rgba(0,0,0,0.3)); */
}
.hero-image::before {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, #ff4df9eb, transparent);
  filter: blur(100px);
  z-index: 1;
}

@keyframes sparkleMove {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-120px);
  }
}
/* FEATURES */
.features {
  width: 100%;
  max-width: 1200px;

  margin: 30px auto 60px;

  display: flex;
  gap: 25px;
}
.feature-text h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.feature-text p {
  margin: 4px 0 0;
  font-size: 14px;
  color: #555;
}
/* FEATURE CARD */
.feature-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 15px;

  padding: 20px 25px;
  border-radius: 25px;

  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.08),
    inset 0 1px 2px rgba(255, 255, 255, 0.6);

  transition: 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-6px);
}

/* ICON (FIXED TARGET) */
.feature-card .icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;

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

  font-size: 28px;

  background: linear-gradient(135deg, #ffe4e6, #e0f2fe);

  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.8),
    0 5px 15px rgba(0, 0, 0, 0.1);
} /* IMAGE PERFECT FIT */
.card .icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
/* 🔥 PREMIUM FLAVORS */
.flavors {
  width: 100%;
  max-width: 1200px;

  margin: 60px auto;

  text-align: left;
}

.flavors h2 {
  font-size: 36px;
  font-style: italic;
  text-underline-offset: inherit;
}

/* GRID */
.flavor-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* EXACTLY 4 cards per row */
  gap: 100px;
  margin-top: 60px;
}
.flavor-cards + .flavor-cards {
  margin-top: 60px;
}

/* CARD */
.card {
  position: relative;
  padding: 30px 20px;
  border-radius: 25px;
  backdrop-filter: blur(15px);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  transition: 0.3s ease;
  overflow: hidden;
}

/* GLOW BORDER */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 25px;
  padding: 2px;

  /* background: linear-gradient(135deg, #ff4fa3, #7b61ff, #00d4ff); */

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  /* ADD THIS (missing in your file) */
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;

  pointer-events: none;
}
/* ICON */
.card .icon {
  font-size: 40px;
  margin-bottom: 15px;
  align-items: center;
}

/* TEXT */
.card h3 {
  font-size: 18px;
  font-weight: 600;
}

/* HOVER */
.card:hover {
  transform: translateY(-12px) scale(1.05);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

.card:hover::before {
  background: linear-gradient(135deg, #ff0080, #7928ca, #00d4ff);
}

/* TEXT ON IMAGE */
.image-card h3 {
  position: absolute;
  bottom: 15px;
  left: 20px;

  color: #fff;
  font-size: 20px;
  font-weight: 600;

  z-index: 2;
}

.image-card {
  position: relative;
  overflow: hidden;
  border-radius: 25px;
  /* remove normal card styles */
  padding: 0 !important;
  /* background: none !important; */
  box-shadow: none !important;
  /* backdrop-filter: none !important; */
}

/* REMOVE BORDER EFFECT */
.image-card::before {
  display: none;
}

/* IMAGE FULL FIT */
.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 25px;
  /* transition: 0.2s ease; */
}

/* TEXT ON IMAGE */
.image-card h3 {
  position: absolute;
  bottom: 15px;
  left: 20px;

  color: #fff;
  font-size: 20px;
  font-weight: 600;
  z-index: 2;
}

/* DARK OVERLAY */
.image-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 25px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}

/* HOVER EFFECT 🔥 */
.image-card:hover img {
  transform: scale(1);
}
.image-card {
  position: relative;
  overflow: hidden;
  border-radius: 25px;

  /* GLASS EFFECT ADD */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  border: 1px solid rgba(255, 255, 255, 0.3);

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);

  height: 260px;
}

/* BOTH IMAGES SAME POSITION */
.image-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s ease;
}

/* DEFAULT IMAGE */
.img-default {
  opacity: 1;
}

/* HOVER IMAGE */
.img-hover {
  opacity: 0;
}

/* HOVER EFFECT */
.image-card:hover .img-default {
  opacity: 0;
}

.image-card:hover .img-hover {
  opacity: 1;
}
/* ⭐ SPARKLES CONTAINER */
.sparkles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ⭐ STAR SHAPE */
.star {
  position: absolute;
  background: white;

  clip-path: polygon(
    50% 0%,
    60% 40%,
    100% 50%,
    60% 60%,
    50% 100%,
    40% 60%,
    0% 50%,
    40% 40%
  );

  filter: drop-shadow(0 0 6px white);

  animation: twinkle 5s infinite ease-in-out;
}

/* 🍬 SPRINKLES */
.sprinkle {
  position: absolute;
  width: 12px;
  height: 5px;
  border-radius: 10px;

  background: linear-gradient(90deg, #ff4da6, #ffd700);

  animation: float 6s infinite ease-in-out;
}

/* ⭐ ANIMATION */
@keyframes twinkle {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

/* 🍬 ANIMATION */
@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(180deg);
  }
  100% {
    transform: translateY(0px) rotate(360deg);
  }
}

/* ?? STICKY NAVBAR ON SCROLL */
.navbar.sticky {
  position: fixed !important;
  top: 0; /* same spacing maintain */
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  z-index: 999;
  border-radius: 0 0 20px 20px;
}


/* 🔥 SCROLL TO TOP BUTTON */
.scroll-top-btn {
  position: fixed;
  bottom: 25px;
  right: 25px;

  width: 45px;
  height: 45px;

  background: #ff4da6;
  color: white;

  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  cursor: pointer;

  box-shadow: 0 10px 25px rgba(0,0,0,0.2);

  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);

  transition: all 0.3s ease;
  z-index: 999;
}

/* SHOW BUTTON */
.scroll-top-btn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/* 🔥 FIX: ALLOW BUTTON CLICKS */
.hero::before,
.hero::after,
.sparkles {
  pointer-events: none;
}

/* 🔥 HERO CONTENT ALWAYS CLICKABLE */
.hero-content,
.hero-buttons,
.hero-buttons a {
  position: relative;
  z-index: 10;
}

/* 🔥 FIX: anchor scroll offset for navbar */
#our-menu {
  scroll-margin-top: 140px;
}

/* ========================= */
/* MOBILE RESPONSIVE FIX */
/* ========================= */
.menu-toggle {
  display: none;
}

@media (max-width: 768px) {
  /* HEADER CLEAN */
  .navbar {
    padding: 15px 20px;
    border-radius: 20px;
  }

  /* LOGO NORMAL SIZE */
  .logo img {
    transform: scale(1.3); /* reduce for mobile */
  }

  /* HIDE EXTRA */
  .menu {
    display: none;
  }

  .nav-buttons {
    margin-right: 30px; /* menu ki space */
    gap: 8px; /* 📍 🛒 madhya small gap */
  }

  .nav-buttons a {
    font-size: 0;
    padding: 0 !important;
    margin-left: 0 !important;

    width: 40px;
    height: 40px;

    min-width: unset !important;

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

    background: transparent !important;
    border: none !important;
  }

  /* 🔥 Important override for gradient button */
  .btn-gradient {
    background: transparent !important;
  }

  .nav-buttons a i {
    font-size: 18px;
    margin: 0;
  }

  /* HAMBURGER */
  .menu-toggle {
    display: block;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
  }
  /* MENU DROPDOWN */
  .menu.active {
    display: flex;
    flex-direction: column;

    position: absolute;
    top: 70px;
    left: 0;

    width: 100%;
    background: white;

    padding: 20px;
    gap: 15px;

    border-radius: 0 0 20px 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }

  .menu.active a {
    padding: 12px;
    font-size: 16px;
    border-bottom: 1px solid #eee;
  }
  .hero-buttons {
    flex-direction: column; /* 🔥 vertical stack */
    align-items: center; /* center align */
    gap: 12px;
  }

  /* buttons full width look */
  .btn-primary,
  .btn-secondary {
    width: 100%;
    max-width: 260px; /* nice centered width */
  }
  .flavor-cards {
    grid-template-columns: 1fr; /* ONE CARD PER ROW */
    gap: 25px;
  }

  .flavors {
    padding: 0 15px;
  }

  .card {
    padding: 20px;
  }

  .image-card {
    height: 220px;
  }

  .hero {
    flex-direction: column;
    padding: 100px 20px 40px;
    text-align: center;
  }

  .hero-content,
  .hero-image {
    width: 100%;
  }

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

  .hero-img {
    max-width: 300px;
  }

  .features {
    flex-direction: column;
    gap: 20px;
    padding: 0 15px;
  }

  .feature-card {
    width: 100%;
    justify-content: flex-start;
  }
  .menu.active {
    display: flex;
  }
  .btn-gradient i {
    font-size: 14px;
    color: #ff4da6 !important;
  }
}
/* SECTION */
/* SECTION */
.flavors1 {
  width: 100%;
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 20px;
  text-align: center;
}

.flavors1 h2 {
  font-size: 34px;
  margin-bottom: 50px;
  color: #222;
  letter-spacing: 1px;
}

/* GRID */
.flavor-cards1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

/* CARD */
.card.image-card1 {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  cursor: pointer;
}

.card.image-card1:hover {
  transform: translateY(-10px) scale(1.02);
}

/* IMAGE */
.img-default1 {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 🔥 important fix */
  transition: transform 0.4s ease;
}

.image-card1:hover .img-default1 {
  transform: scale(1.08);
}

/* OVERLAY CONTENT */
.card-content1 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 18px;
  background: linear-gradient(to top, rgba(0,0,0,0.83), rgba(0,0,0,0.7), transparent);
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  transform: translateY(100%);
  transition: 0.4s ease;
}

/* SHOW ON HOVER */
.image-card1:hover .card-content1 {
  transform: translateY(0);
}

/* MOBILE FIX (always visible text) */
@media (max-width: 768px) {
  .card-content1 {
    transform: translateY(100%);
    transition: 0.4s ease;
    font-size: 13px;
    padding: 12px;
  }
}

/* RESPONSIVE GRID */
@media (max-width: 1024px) {
  .flavor-cards1 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .flavor-cards1 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .flavor-cards1 {
    grid-template-columns: repeat(1, 1fr);
  }
}