<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ asset('resources/views/Admin/pages/subscriptions/subscription-style.css') }}" />

    <title>Cancel Subscription</title>
</head>
<style>
   


    @media screen and (max-width: 767px) {
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            height: 100vh;
            position: relative;
        }
        .main-inn {
            padding-top: 24px;
        }
        .footer .d-flex img {
            width: 40px;
            margin-right: 10px;
        }
        .footer {
            align-items: center;
            background: #000;
            display: flex;
            justify-content: space-between;
            padding: 10px;
            color: #fff;
            width: 100%;
            position: absolute;
            bottom: 0;
        }

        .footer p {
            font-size: 13px;
        }

        .footer a {
            font-size: 12px;
            border: 1px solid #fff;
            padding: 3px 8px;
            border-radius: 20px;
        }

      
        .thankyou {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 80vh;
        }
        /* section.new-subs-main {
            min-height: 100vh;
        } */
    }
</style>

<body>
   
    <section class="new-subs-main">
       
        <div class="thankyou">
            <div class="mod-img">
                <img src="{{ asset('resources/views/Admin/pages/subscriptions/images/dull.png') }}"
                alt="">
            </div>
            <p class="para-mid text-center">Your subscription has been cancelled successfully.</p>

        </div>
    </section>
    <footer>
        <div class="footer">
            <div class="d-flex">
                <img src="{{ asset('https://www.wdipl.com/public/img/black_logo.svg') }}" />
                <p>Enjoying the App?<br> Want to build your own?</p>
            </div>
            <a href="https://www.wdipl.com/contact-us" target="_blank">Contact WDI</a>
        </div>
    </footer>
   

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>

    <script type="module">
        import {
            Tablist
        } from "https://cdn.jsdelivr.net/npm/jolty@0.6.2/dist/jolty.esm.min.js";
        document.addEventListener('DOMContentLoaded', () => {
            Tablist.initAll();
        });
    </script>

    {{-- <script>
        $(document).ready(function() {
            // Hide the alert after 3 seconds (3000 milliseconds)
            setTimeout(function() {
                $('#alert-success').fadeOut('slow');
            }, 3000);
            setTimeout(function() {
                $('#alert-danger').fadeOut('slow');
            }, 3000);
        });
    </script> --}}


</body>


</html>
