@extends('layouts.main')
@push('title')
<title>Thank You</title>  
@endpush
@section('main-section')


<style>
    /* Full-height background styling */
    .backound_thankyou {
        height: 100vh; /* Full viewport height */
        margin-top:150px;
        display: flex;
        align-items: center;
        justify-content: center;
        /* background: linear-gradient(135deg, #6c63ff, #e66465, #ff9c5f); */
        background: linear-gradient(135deg, #120434, #e66465, #fb9730);
        background-size: 400% 400%; /* Smooth gradient animation */
        animation: gradientAnimation 15s ease infinite;
    }

    /* Keyframe animation for gradient */
    @keyframes gradientAnimation {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    /* Card styling */
    .thank-you-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 50px;
        width: 80%;
        max-width: 500px;
        background: linear-gradient(145deg, #f0f0f3, #d4d4d8);
        border-radius: 15px;
        box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
        text-align: center;
        font-family: Arial, sans-serif;
    }

    /* Title */
    .thank-you-section h1 {
        font-size: 1.5rem;
        font-weight: bold;
        color: #333;
        margin-bottom: 20px;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    }

    /* Paragraph */
    .thank-you-section p {
        font-size: 1.2rem;
        color: #555;
        margin-bottom: 30px;
    }

    /* Spacer for spacing */
    .spacer {
        height: 20px;
    }

    /* Button styling */
    .thank-you-section .button {
        display: inline-block;
        padding: 10px 20px;
        font-size: 1rem;
        font-weight: bold;
        color: #fff;
        background: linear-gradient(145deg, #6c63ff, #5951d4);
        border: none;
        border-radius: 8px;
        text-decoration: none;
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2),
                    -4px -4px 10px rgba(255, 255, 255, 0.5);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    /* Button hover effect */
    .thank-you-section .button:hover {
        transform: translateY(-5px);
        box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.3),
                    -6px -6px 15px rgba(255, 255, 255, 0.6);
    }
</style>
<div class="backound_thankyou">
    <div class="thank-you-section">
        <h1>Thank you for <br> Your Order!</h1>
        <p>A confirmation email was sent</p>
        <div class="spacer"></div>
        <div>
            <a href="{{ url('/') }}" class="button">Home Page</a>
        </div>
    </div>
</div>
@endsection