<?php $this->load->view('website/partials/header'); ?>

        <!--Start Breadcrumb Area-->
        <section class="breadcrumb-area">
            <div class="breadcrumb-area-bg" style="background-image: url(<?php echo base_url('assets/website/assets/images/backgrounds/breadcrumb-area-bg.jpg'); ?>);"></div>
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="inner-content">
                            <div class="title" data-aos="fade-right" data-aos-easing="linear" data-aos-duration="500">
                                <h2>Our Cards</h2>
                            </div>
                            <div class="breadcrumb-menu" data-aos="fade-left" data-aos-easing="linear" data-aos-duration="500">
                                <ul>
                                    <li><a href="<?php echo site_url(); ?>">Home</a></li>
                                    <li class="active">Cards</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--End Breadcrumb Area-->


        <!--Start Card Banner Area-->
        <section class="card-banner-area">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card-banner-content">
                            <div class="card-banner-content-bg"
                                style="background-image: url(<?php echo base_url('assets/website/assets/images/shapes/card-banner-area-bg.png'); ?>);">
                            </div>
                            <div class="card-banner-content-img-box">
                                <img src="<?php echo base_url('assets/website/assets/images/resources/card-banner-img-1.png'); ?>" alt="">
                            </div>
                            <div class="inner-title">
                                <h4>Virtual & Physical Cards</h4>
                                <h2>Secure Payments &<br> Full Control</h2>
                            </div>
                            <div class="text">
                                <p>Create virtual cards instantly or request a physical<br> card for all your payment needs.</p>
                            </div>
                            <div class="btns-box">
                                <a class="btn-one" href="<?php echo site_url('auth/login'); ?>">
                                    <span class="txt">Get Started</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--End Card Banner Area-->


        <!--Start Cards Area-->
        <section class="cards-area">
            <div class="container">
                <div class="row">

                    <div class="col-xl-12">
                        <div class="cards-content-box">

                            <div class="cards-content-box-top">
                                <div class="left-box">
                                    <h2>Best Cards for Your Needs</h2>
                                </div>
                            </div>

                            <!--Start Single Card Box-->
                            <div class="single-card-box">
                                <div class="category-box">Virtual</div>
                                <div class="cards-img-box">
                                    <div class="inner-title">
                                        <h3>Virtual Debit Card</h3>
                                    </div>
                                    <div class="inner">
                                        <img src="<?php echo base_url('assets/website/assets/images/resources/card-1.jpg'); ?>" alt="">
                                    </div>
                                    <div class="btn-box">
                                        <a class="btn-one style2" href="<?php echo site_url('auth/login'); ?>">
                                            <span class="txt">Create Now</span>
                                        </a>
                                    </div>
                                </div>
                                <div class="cards-text-box">
                                    <p>Create instant virtual cards for secure online shopping. Perfect for subscriptions and one-time purchases.</p>
                                    <h3>Features & Benefits</h3>
                                    <ul>
                                        <li>Instant card creation - no waiting</li>
                                        <li>Custom spending limits per card</li>
                                        <li>Freeze/unfreeze with one tap</li>
                                        <li>Works globally on all websites</li>
                                    </ul>
                                </div>
                            </div>
                            <!--End Single Card Box-->

                            <!--Start Single Card Box-->
                            <div class="single-card-box">
                                <div class="category-box">Physical</div>
                                <div class="cards-img-box">
                                    <div class="inner-title">
                                        <h3>Physical Debit Card</h3>
                                    </div>
                                    <div class="inner">
                                        <img src="<?php echo base_url('assets/website/assets/images/resources/card-2.jpg'); ?>" alt="">
                                    </div>
                                    <div class="btn-box">
                                        <a class="btn-one style2" href="<?php echo site_url('auth/login'); ?>">
                                            <span class="txt">Request Card</span>
                                        </a>
                                    </div>
                                </div>
                                <div class="cards-text-box">
                                    <p>A sleek contactless debit card for in-store and ATM use. Enjoy worldwide acceptance and security.</p>
                                    <h3>Features & Benefits</h3>
                                    <ul>
                                        <li>Contactless tap-to-pay technology</li>
                                        <li>Global ATM access</li>
                                        <li>Chip & PIN security</li>
                                        <li>Real-time transaction notifications</li>
                                    </ul>
                                </div>
                            </div>
                            <!--End Single Card Box-->

                            <!--Start Single Card Box-->
                            <div class="single-card-box">
                                <div class="category-box">Premium</div>
                                <div class="cards-img-box">
                                    <div class="inner-title">
                                        <h3>Premium Metal Card</h3>
                                    </div>
                                    <div class="inner">
                                        <img src="<?php echo base_url('assets/website/assets/images/resources/card-3.jpg'); ?>" alt="">
                                    </div>
                                    <div class="btn-box">
                                        <a class="btn-one style2" href="<?php echo site_url('auth/login'); ?>">
                                            <span class="txt">Upgrade Now</span>
                                        </a>
                                    </div>
                                </div>
                                <div class="cards-text-box">
                                    <p>Exclusive metal card with premium benefits for our most valued customers.</p>
                                    <h3>Features & Benefits</h3>
                                    <ul>
                                        <li>Sleek metal card design</li>
                                        <li>2% cashback on all purchases</li>
                                        <li>Complimentary travel insurance</li>
                                        <li>Airport lounge access</li>
                                    </ul>
                                </div>
                            </div>
                            <!--End Single Card Box-->

                        </div>
                    </div>

                </div>
            </div>
        </section>
        <!--End Cards Area-->


        <!--Start Card Security Features-->
        <section style="padding: 80px 0; background: #f8f9fa;">
            <div class="container">
                <div class="text-center mb-5">
                    <h2 style="font-size: 36px; font-weight: 700; margin-bottom: 15px;">Card Security Features</h2>
                    <p style="color: #6c757d; font-size: 16px;">Your cards are protected with industry-leading security.</p>
                </div>
                <div class="row justify-content-center">
                    <!--Start Single Feature-->
                    <div class="col-xl-4 col-lg-4 col-md-6 mb-4">
                        <div class="text-center" style="padding: 30px 20px;">
                            <div style="width: 80px; height: 80px; margin: 0 auto 25px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 20px; display: flex; align-items: center; justify-content: center;">
                                <svg width="40" height="40" fill="white" viewBox="0 0 24 24">
                                    <path d="M19 10h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h1V9a7 7 0 1 1 14 0v1zM5 12v8h14v-8H5zm6 2h2v4h-2v-4zm6-4V9A5 5 0 0 0 7 9v1h10z"/>
                                </svg>
                            </div>
                            <h3 style="font-size: 22px; font-weight: 600; margin-bottom: 15px;">Instant Lock</h3>
                            <p style="color: #6c757d; font-size: 15px; line-height: 1.6;">Lost your card? Freeze it instantly from the app. Unlock it just as easily when you find it.</p>
                        </div>
                    </div>
                    <!--End Single Feature-->

                    <!--Start Single Feature-->
                    <div class="col-xl-4 col-lg-4 col-md-6 mb-4">
                        <div class="text-center" style="padding: 30px 20px;">
                            <div style="width: 80px; height: 80px; margin: 0 auto 25px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 20px; display: flex; align-items: center; justify-content: center;">
                                <svg width="40" height="40" fill="white" viewBox="0 0 24 24">
                                    <path d="M20 17h2v2h-2v-2zm0-7h2v5h-2v-5zm-2-5a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm-8 8a6 6 0 1 1 12 0 6 6 0 0 1-12 0zm1.5 0a4.5 4.5 0 1 0 9 0 4.5 4.5 0 0 0-9 0zM10 12a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
                                </svg>
                            </div>
                            <h3 style="font-size: 22px; font-weight: 600; margin-bottom: 15px;">Real-Time Alerts</h3>
                            <p style="color: #6c757d; font-size: 15px; line-height: 1.6;">Get instant notifications for every transaction. Know immediately when your card is used.</p>
                        </div>
                    </div>
                    <!--End Single Feature-->

                    <!--Start Single Feature-->
                    <div class="col-xl-4 col-lg-4 col-md-6 mb-4">
                        <div class="text-center" style="padding: 30px 20px;">
                            <div style="width: 80px; height: 80px; margin: 0 auto 25px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border-radius: 20px; display: flex; align-items: center; justify-content: center;">
                                <svg width="40" height="40" fill="white" viewBox="0 0 24 24">
                                    <path d="M5.334 4.545a9.99 9.99 0 0 1 3.542-2.048A3.993 3.993 0 0 0 12 3.999a3.993 3.993 0 0 0 3.124-1.502 9.99 9.99 0 0 1 3.542 2.048 3.993 3.993 0 0 0 .262 3.454 3.993 3.993 0 0 0 2.863 1.955 10.043 10.043 0 0 1 0 4.09c-1.16.178-2.23.86-2.863 1.955a3.993 3.993 0 0 0-.262 3.455 9.99 9.99 0 0 1-3.542 2.047A3.993 3.993 0 0 0 12 20a3.993 3.993 0 0 0-3.124 1.502 9.99 9.99 0 0 1-3.542-2.047 3.993 3.993 0 0 0-.262-3.455 3.993 3.993 0 0 0-2.863-1.954 10.043 10.043 0 0 1 0-4.091 3.993 3.993 0 0 0 2.863-1.955 3.993 3.993 0 0 0 .262-3.454zM13.5 14.597l-3-3 1.06-1.06 1.94 1.939 3.44-3.44L18 9.096l-4.5 4.5z"/>
                                </svg>
                            </div>
                            <h3 style="font-size: 22px; font-weight: 600; margin-bottom: 15px;">Full Control</h3>
                            <p style="color: #6c757d; font-size: 15px; line-height: 1.6;">Set daily limits, disable online/ATM/international transactions, and manage PIN from the app.</p>
                        </div>
                    </div>
                    <!--End Single Feature-->
                </div>
            </div>
        </section>
        <!--End Card Security Features-->


        <!--Start Slogan Content Box-->
        <section class="slogan-area">
            <div class="container">
                <div class="slogan-content-box">
                    <div class="slogan-content-box-bg"
                        style="background-image: url(<?php echo base_url('assets/website/assets/images/backgrounds/slogan-content-box-bg.jpg'); ?>);"></div>
                    <div class="inner-title">
                        <h2>Get Your Card Today</h2>
                        <p>Log in to your account to request a new card or create a virtual card instantly.</p>
                    </div>
                    <div class="btn-box">
                        <a class="btn-one" href="<?php echo site_url('auth/login'); ?>">
                            <span class="txt">Login to Your Account</span>
                        </a>
                    </div>
                </div>
            </div>
        </section>
        <!--End Slogan Content Box-->

<?php $this->load->view('website/partials/footer'); ?>
