/* ------- navbar-css ----------*/
.navbar-brand {
  font-family: 'Pacifico', cursive;
  color: #d63384 !important;
}

.nav-link {
  transition: all 0.3s ease;
}

.nav-link:hover {
  color: #b30c62 !important;
}





@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
#hero-section h2 {
  opacity: 0;
  transform: translateX(-50px);
  animation: fadeInLeft 1s forwards;
}

#hero-section p {
  opacity: 0;
  transform: translateX(-50px);
  animation: fadeInLeft 1s forwards;
}
#hero-section a {
  opacity: 0;
  transform: translateX(-50px);
  animation: fadeInLeft 1s forwards;
}
#about-section h2 {
  opacity: 0;
  transform: translateX(-50px);
  animation: fadeInLeft 1s forwards;
}
#product-section1 {
  opacity: 0;
  transform: translateX(-50px);
  animation: fadeInLeft 1s forwards;
}
#intro-section {
  opacity: 0;
  transform: translateX(-50px);
  animation: fadeInLeft 1s forwards;
}

#text1 {
  opacity: 0;
  transform: translateX(-50px);
  animation: fadeInLeft 1s forwards;
}

#card1 {
  opacity: 0;
  transform: translateX(-50px);
  animation: fadeInLeft 1s forwards;
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#product-section2 {
  opacity: 0;
  transform: scale(0.8);
  animation: popIn 0.6s ease-out forwards;
}

@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#cake-section1 {
  opacity: 0;
  transform: translateY(50px);
  animation: slide-up 1s forwards;
}

#cake-section2 {
  opacity: 0;
  transform: translateY(50px);
  animation: slide-up 1s forwards;
}

#cake-section3 {
  opacity: 0;
  transform: translateY(50px);
  animation: slide-up 1s forwards;
}

#cake-section4 {
  opacity: 0;
  transform: translateY(50px);
  animation: slide-up 1s forwards;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

#product-section3 {
  opacity: 0;
  transform: translateX(50px);
  animation: fadeInRight 1s forwards;
}

#card3 {
  opacity: 0;
  transform: translateX(50px);
  animation: fadeInRight 1s forwards;
}

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

#text2 {
  opacity: 0;
  transform: translateY(-50px);
  animation: fadeInDown 1s forwards;
}

.order-btn {
  border: 2px dashed #b30c62;
  color: #b30c62;
  transition: all 0.3s ease;
}

.order-btn:hover {
  background-color: #b30c62;
  color: #fff;
  border-style: solid;
}