@keyframes slideDown {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-20px);
        opacity: 0;
    }
}

/* Pulse Animation for Hero CTA Button */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(218, 165, 32, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 20px 20px rgba(218, 165, 32, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(218, 165, 32, 0);
    }
}

.hero-cta {
    animation: pulse 2s infinite;
    transition: transform 0.3s ease-in-out;
}


/* Slide-in Animation for Feature Cards */
.feature-card {
    transform: translateX(-100%);
    opacity: 0;
    transition: all 0.8s ease-in-out;
}
.feature-card.slide-in {
    transform: translateX(0);
    opacity: 1;
}

/* Fade-in Animation for Testimonials */
.testimonial-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}
.testimonial-card.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* Slide-in Animation for Status Cards */
.status-card {
    transform: translateY(100%);
    opacity: 0;
    transition: all 0.8s ease-in-out;
}
.status-card.slide-in {
    transform: translateY(0);
    opacity: 1;
}


/* For smooth transitions and animations */
#mobile-menu-toggle .block {
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Open state transformations */
.open #line1 {
    transform: translateY(8px) rotate(45deg);
}

.open #line2 {
    opacity: 0;
}

.open #line3 {
    transform: translateY(-8px) rotate(-45deg);
}

/* Menu enter and exit animations */
@keyframes menuEnter {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes menuExit {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-20px);
        opacity: 0;
    }
}

.menu-enter {
    animation: menuEnter 0.4s forwards;
}

.menu-exit {
    animation: menuExit 0.4s forwards;
}

/* Example classes for different message categories */
.bg-success-100 {
    background-color: #d4edda;
}
.border-success-400 {
    border-color: #c3e6cb;
}
.text-success-700 {
    color: #155724;
}
.text-success-500 {
    color: #155724;
}

.bg-danger-100 {
    background-color: #f8d7da;
}
.border-danger-400 {
    border-color: #f5c6cb;
}
.text-danger-700 {
    color: #721c24;
}
.text-danger-500 {
    color: #721c24;
}

.bg-warning-100 {
    background-color: #fff3cd;
}
.border-warning-400 {
    border-color: #ffeeba;
}
.text-warning-700 {
    color: #856404;
}
.text-warning-500 {
    color: #856404;
}

/* Add a smooth fade-out effect for the flash messages */
.opacity-0 {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

/* Optional: Additional utility classes for spacing and positioning */
.flash-message {
    transition: opacity 0.6s ease-out, transform 0.3s ease-out;
}

/* Syrup Background Styling */
.syrup-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1; /* Keep it behind all other content */
}

/* SVG Animation */
.syrup-flow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%; /* Double the width for seamless transition */
    height: auto;
    animation: syrup-flow 25s alternate linear infinite; /* Infinite flowing animation */
}

/* Keyframes for Flowing Animation */
@keyframes syrup-flow {
    0% {
        transform: translateX(0); /* Start at normal position */
    }
    100% {
        transform: translateX(-50%); /* Move one wave off-screen to the left */
    }
}

/* Second Wave for More Dynamics */
.syrup-flow-2 {
    animation: syrup-flow 25s alternate linear infinite;
    bottom: -30px; /* Shift down to overlap nicely */
    opacity: 0.7; /* Make it more subtle */
}

@keyframes syrup-flow-2 {
    0% {
        transform: translateX(0); /* Start at normal position */
    }
    100% {
        transform: translateX(-50%); /* Move one wave off-screen to the left */
    }
}

/* Mobile-Specific Adjustments */
@media (max-width: 768px) {
    .syrup-flow {
        width: 650%; /* Increase the width for a larger effect on mobile */
        bottom: 0px; /* Pull it up to cover more of the screen */
    }
}

/* Images Floating within the Syrup */
.syrup-flowing-image {
    position: absolute;
    width: 50px; /* Adjust size to your liking */
    animation: float-off-screen 50s alternate linear infinite; /* Adjusted duration to match the syrup flow */
    opacity: 0.8;
}

/* Different Animations for Different Images */
.syrup-floating-animation-1 {
    bottom: 10%;
    left: 15%;
}

.syrup-floating-animation-2 {
    bottom: 20%;
    left: 30%;
}

.syrup-floating-animation-3 {
    bottom: 15%;
    left: 50%;
}

.syrup-floating-animation-4 {
    bottom: 25%;
    left: 70%;
}

.syrup-floating-animation-5 {
    bottom: 10%;
    left: 85%;
}

/* Keyframes to Float Images Off Screen */
@keyframes float-off-screen {
    0% {
        transform: translateX(0) translateY(0);
    }
    50% {
        transform: translateX(-100vw) translateY(50px); /* Move completely off screen to the left */
    }
    100% {
        transform: translateX(100vw) translateY(-50px); 
    }
}





.animated-icon {
    animation: pulse-grow 3s infinite ease-in-out;
}

/* Animation for pulsing and growing */
@keyframes pulse-grow {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.glowing-icon {
    animation: glowing 3s infinite alternate;
}

@keyframes glowing {
    0% {
        text-shadow: 0 0 5px #ffd700, 0 0 10px #ffd700, 0 0 15px #ffd700, 0 0 20px #ffbf00, 0 0 25px #ffbf00, 0 0 30px #ffbf00, 0 0 35px #ffbf00;
        transform: scale(1);
    }
    100% {
        text-shadow: 0 0 20px #ffd700, 0 0 30px #ffd700, 0 0 40px #ffd700, 0 0 50px #ffbf00, 0 0 60px #ffbf00, 0 0 70px #ffbf00, 0 0 80px #ffbf00;
        transform: scale(1.1);
    }
}

.animated-wrench {
    animation: wrench-move 2s ease-in-out infinite;
}

@keyframes wrench-move {
    0% {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(-10deg);
    }
}

@keyframes spin-slow {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes grow-subtle {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-spin-slow {
    animation: spin-slow 20s linear infinite;
}

.animate-grow-subtle {
    animation: grow-subtle 4s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(-10px) translateX(5px);
    }
    50% {
        transform: translateY(0) translateX(10px);
    }
    75% {
        transform: translateY(10px) translateX(5px);
    }
    100% {
        transform: translateY(0) translateX(0);
    }
}

.floating-animation-1 {
    animation: float 10s ease-in-out infinite alternate;
}

.floating-animation-2 {
    animation: float 12s ease-in-out infinite alternate;
}

.floating-animation-3 {
    animation: float 8s ease-in-out infinite alternate;
}

.floating-animation-4 {
    animation: float 11s ease-in-out infinite alternate;
}

/* Step Animation Classes */
.step {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.8s ease-in-out;
}

.step.slide-in-left {
    opacity: 1;
    transform: translateX(0);
}

.step.slide-in-right {
    opacity: 1;
    transform: translateX(100%);
    transition: all 0.8s ease-in-out;
    transform: translateX(100%);
}

/* Ensure visible steps do not retrigger */
.step.visible {
    opacity: 1;
    transform: translateX(0);
}