/* Full-screen loader with romantic feel */
#loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fdeff2; /* Soft pastel pink */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    font-family: "Dancing Script", cursive;
  }

  /* Heart animation */
  .heart-loader {
    width: 50px;
    height: 50px;
    background: rgb(254, 121, 121);
    position: relative;
    transform: rotate(-45deg);
    animation: heartbeat 1s infinite ease-in-out;
    margin-bottom: 10px;
  }

  /* Create the heart shape */
  .heart-loader::before,
  .heart-loader::after {
    content: "";
    width: 50px;
    height: 50px;
    background: rgb(254, 121, 121);
    border-radius: 50%;
    position: absolute;
  }

  .heart-loader::before {
    top: -25px;
    left: 0;
  }

  .heart-loader::after {
    left: 25px;
    top: 0;
  }

  /* Heartbeat Animation */
  @keyframes heartbeat {
    0%,
    100% {
      transform: scale(1) rotate(-45deg);
    }
    50% {
      transform: scale(1.2) rotate(-45deg);
    }
  }

  /* Romantic loading text */
  #progress-text {
    font-size: 18px;
    color: #a52a2a; /* Wedding-themed deep red */
    margin-top: 15px;
  }

  /* Smooth fade-out effect */
.fade-out {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* Fade in content smoothly */
.fade-in {
    opacity: 1 !important;
}