:root {
  --primary-color: #c7ea46; /* Lemon Green */
  --secondary-color: #fff44f; /* Lemon Yellow */
  --bg-gradient: linear-gradient(135deg,  #c7ea46, #eaff8f); /* Soft Lemon Gradient */
  --bg-section-colored-gradient: linear-gradient(135deg , #eaff8f,  #006600); /* Soft Lemon Gradient */
  --bg-section-colored-gradient-love:linear-gradient(135deg, #B22222, #FF3366, #FFDDEE);
  --bg-section-colored-gradient-birthday:linear-gradient(135deg, #ffecd2, #fcb69f);
  --bg-section-colored-gradient-anniversary:linear-gradient(135deg, #d299c2, #fef9d7);
  --bg-section-colored-gradient-everyday:linear-gradient(135deg, #a1ffce, #faffd1);
  --bg-section-colored-gradient-family:linear-gradient(135deg, #f6d365, #fda085);
  --bg-section-colored-gradient-friendship:linear-gradient(135deg, #fbc2eb, #a18cd1);
  --bg-section-white-gradient: linear-gradient(135deg,  #ffffff, #eaff8f); /* Soft Lemon Gradient */
  --text-dark: #1c1c1c;
  --bg-light: #ffffe0; /* Light lemony background */
  --dark-green: #006600; /* Deep forest green */

}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: var(--dark-green); /* dark green background */
  border-radius: 50%;                 /* make it circular */
  background-size: 60% 60%;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-block;
}
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
  background-color: #022c02; /* darker green on hover */
}

.carousel .text-center,
.carousel h3,
.carousel h5 {
  color: var(--dark-green);
}
.carousel .btn-outline-primary {
  color: var(--dark-green);
  border-color: var(--dark-green);
}

.carousel .btn-outline-primary:hover {
  background-color: var(--dark-green);
  color: #000000;
}

.section-heading {
  color: var( --text-dark);
  text-shadow: 1px 1px 2px #333;
}

.section-white {
  background: var(--bg-section-white-gradient);
  color: #1c1c1c;
  padding: 40px 20px;
  border-radius: 12px;
    box-shadow: 0 0 15px rgba(0,0,0,0.08);

}

.section-colored {
  background: var(--bg-section-colored-gradient);
  color: #fff;
  padding: 40px 20px;
  border-radius: 12px;
    border-top: 2px solid #fff44f;

}
.section-love{
  background: var(--bg-section-colored-gradient-love);
  color: #fff;
  padding: 40px 20px;
  border-radius: 12px;
    border-top: 2px solid #fff44f;
}

.section-birthday{
  background: var(--bg-section-colored-gradient-birthday);
  color: #fff;
  padding: 40px 20px;
  border-radius: 12px;
    border-top: 2px solid #fff44f;
}

.section-anniversary{
  background: var(--bg-section-colored-gradient-anniversary);
  color: #fff;
  padding: 40px 20px;
  border-radius: 12px;
    border-top: 2px solid #fff44f;
}
.section-everyday{
  background: var(--bg-section-colored-gradient-everyday);
  color: #fff;
  padding: 40px 20px;
  border-radius: 12px;
    border-top: 2px solid #fff44f;
}
.section-family{
  background: var(--bg-section-colored-gradient-family);
  color: #fff;
  padding: 40px 20px;
  border-radius: 12px;
    border-top: 2px solid #fff44f;
}
.section-friendship{
  background: var(--bg-section-colored-gradient-friendship);
  color: #fff;
  padding: 40px 20px;
  border-radius: 12px;
    border-top: 2px solid #fff44f;
}
.navbar-toggler {
  border-color: var(--dark-green); /* Optional: green border */
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,102,0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
      body {
        background: var(--bg-gradient);
        font-family: 'Segoe UI', sans-serif;
        
      }

      .navbar-brand {
        font-weight: bold;
        color: var(--dark-green);
      }

      .nav-link {
        color: #006600;
      }

      .nav-link:hover {
        color: var(--dark-green);
      }

      .tagline {
        color: #fff;
        font-size: 1.2rem;
        font-style: italic;
      }

      .logo-img {
         border-radius: 12px;
		border: 2px solid #022c02;
        margin-right: 10px;
		
		
      }

      footer {
        margin-top: 40px;
        padding: 20px 0;
        background-color: #311e58;
        color: #ddd;
      }

      .card-item {
        transition: transform 0.2s ease-in-out;
        border: none;
        border-radius: 10px;
        overflow: hidden;
      }

      .card-item:hover {
        transform: scale(1.03);
      }

      .card-title {
        color: var(--primary-color);
        font-weight: 600;
      }

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

      .btn-outline-primary:hover {
        background-color: var(--primary-color);
        color: #000;
      }
	  .fade-in {
		 opacity: 0;
		 animation: fadeIn 0.9s ease-in forwards;
		}

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

  .font-fredoka  {
    font-family: 'Fredoka ', cursive;
  }
  .font-greatvibes {
    font-family: 'Great Vibes', cursive;
  }
  .font-lobster {
    font-family: 'Lobster', cursive;
  }
  .font-pacifico {
    font-family: 'Pacifico', cursive;
  }
  .font-dancingscript {
    font-family: 'Dancing Script', cursive;
  }
  .font-cinzel {
    font-family: 'Cinzel Decorative', cursive;
  }

.font-lobster-home-bar
{
          font-family: 'Pacifico', cursive;
		  
      white-space: nowrap;
      cursor: pointer;
      text-decoration: none;
      color: inherit;
      transition: all 0.2s ease;
      position: relative;
    }

    .font-lobster-home-bar:hover::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: red;
    }

.preview-button-container {
  position: absolute;
  top: 0.25rem;
  right: 0.5rem;
}

@media (max-width: 575.98px) {
  .preview-button-container {
    position: static;
    width: 100%;
    text-align: right;
    margin-top: 0.5rem;
  }
}


.fade-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in {
  opacity: 1;
  transform: translateY(0);
}

.fade-out {
  opacity: 0;
}

/* Optional: Smooth scroll for subcategory nav on mobile */
.subcategory-nav::-webkit-scrollbar {
  display: none;
}

.subcategory-nav {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Active pill style override */
.active-subnav {
  background-color: #28a745 !important;
  color: white !important;
  font-weight: 500;
  border: 1px solid #1e7e34;
}

/* Make accordion body padding smaller */
.accordion-body {
  padding: 0.5rem 1rem;
}

/* Subcategory buttons */
.accordion-body .btn {
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
}

.accordion-button {
  font-size: 0.9rem;
  padding: 0.5rem 1rem;

  background-color: #eaff8f !important;  /* Lemon green */
  color: #000 !important;                /* Black text for contrast */
  box-shadow: none !important;
  border-bottom: 1px solid #aadd77;
}

.active-page {
  color: #007b00;
  font-weight: bold;
  text-decoration: underline;
}