<style>
    body {
        font-family: Arial, sans-serif;
        text-align: center;
        padding-top: 80px;
        background: #f5f5f5;
    }
    .success-box {
        display: inline-block;
        padding: 20px 40px;
        background: #d4edda;
        border: 2px solid #c3e6cb;
        border-radius: 10px;
        font-size: 1.3rem;
        color: #155724;
        box-shadow: 0 0 8px rgba(0,0,0,0.1);
    }
    .fade-out {
        opacity: 1;
        transition: opacity 1.5s ease-out;
    }
    .fade-out.hidden {
        opacity: 0;
    }
    
    .success-container {
    text-align: center;
    margin-top: 80px;
}

.checkmark {
    width: 100px;
    height: 100px;
    stroke-width: 3;
    stroke: #28a745;
    stroke-miterlimit: 10;
    animation: scale .4s ease-in-out forwards;
}

.checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: stroke 0.6s cubic-bezier(.65,0,.45,1) forwards;
}

.checkmark-check {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(.65,0,.45,1) 0.6s forwards;
}

body {
    font-family: Arial, sans-serif;
    background: #eef2f3;
    margin: 0;
}


@keyframes stroke {
    100% { stroke-dashoffset: 0; }
}
@keyframes scale {
    50% { transform: scale3d(1.1, 1.1, 1); }
}
.success-text {
    margin-top: 20px;
    font-size: 1.4rem;
    color: #155724;
}

</style>

<script>
// Fade out the success box before redirect
document.addEventListener("DOMContentLoaded", () => {
    setTimeout(() => {
        const box = document.querySelector(".success-box");
        box.classList.add("hidden");
    },500); // start fade after half a second
});
</script>

</head>
<body>

<div class="success-box fade-out">
    <strong>Payment Successful!</strong><br>
    Redirecting you to the sales page...
</div>

</body>
</html>