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

<!-- dd -->
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Invoice 360- Invoice. Vouchers. Transactions</title>

    <link href="assets-landing/css/bootstrap.css" rel="stylesheet">    
    <link href="assets-landing/css/fontawesome-all.css" rel="stylesheet">  
    <link href="assets-landing/css/animate.css" rel="stylesheet">  
    <link href="assets-landing/css/aos.css" rel="stylesheet">  
    <link href="assets-landing/css/icomoon.css" rel="stylesheet">  
    <link href="assets-landing/css/owl.css" rel="stylesheet">
    <link href="assets-landing/css/jquery-ui.css" rel="stylesheet">
    <link href="assets-landing/css/nice-select.css" rel="stylesheet">
    <link href="assets-landing/css/jquery.fancybox.min.css" rel="stylesheet">
    <link href="assets-landing/css/aos.css" rel="stylesheet">
    <link href="assets-landing/css/global.css" rel="stylesheet"> 
    <link href="assets-landing/css/elements-css/header.css" rel="stylesheet">
    <link href="assets-landing/css/elements-css/footer.css" rel="stylesheet">
    <link href="assets-landing/css/style.css" rel="stylesheet">
    <link href="assets-landing/css/responsive.css" rel="stylesheet">

    <!-- Fav Icon -->
    <link rel="shortcut icon" href="assets-landing/images/favicon.png" type="image/x-icon">
    <link rel="icon" href="assets-landing/images/favicon.png" type="image/x-icon">
    <!-- End Fav Icon -->

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Urbanist:wght@300;400;500;600;700;800;900&amp;display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&amp;display=swap" rel="stylesheet">
    <!-- End Google Fonts -->
<style>
.billing-container {
        max-width: 1100px;
        margin: 60px auto;
        padding: 0 2px;
    }

    .billing-header {
        text-align: center;
        margin-bottom: 50px;
    }

    .billing-header h1 {
        font-size: 34px;
        margin-bottom: 10px;
        font-weight: 700;
    }

    .billing-header p {
        font-size: 16px;
        color: #6b7280;
    }

    .plans {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 30px;
    }

    .plan-card {
        background: #ffffff;
        border-radius: 14px;
        padding: 35px 30px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.06);
        position: relative;
        transition: transform .25s ease, box-shadow .25s ease;
    }

    .plan-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 45px rgba(0,0,0,0.1);
    }

    .plan-badge {
        position: absolute;
        top: -12px;
        right: 20px;
        background: #16a34a;
        color: #fff;
        padding: 6px 14px;
        font-size: 12px;
        font-weight: 600;
        border-radius: 20px;
    }

    .plan-title {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .plan-price {
        font-size: 36px;
        font-weight: 800;
        margin: 20px 0 5px;
    }

    .plan-duration {
        color: #6b7280;
        font-size: 14px;
        margin-bottom: 25px;
    }

    .plan-features {
        list-style: none;
        padding: 0;
        margin: 0 0 30px;
    }

    .plan-features li {
        padding: 8px 0;
        font-size: 15px;
        color: #374151;
    }

    .plan-features li::before {
        content: "✔";
        color: #16a34a;
        font-weight: bold;
        margin-right: 10px;
    }

    .plan-action button {
        width: 100%;
        padding: 14px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 10px;
        border: none;
        cursor: pointer;
        transition: background .2s ease;
    }

    .btn-monthly {
        background: #2563eb;
        color: #fff;
    }

    .btn-monthly:hover {
        background: #1d4ed8;
    }

    .btn-annual {
        background: #16a34a;
        color: #fff;
    }

    .btn-annual:hover {
        background: #15803d;
    }

    .billing-footer {
        text-align: center;
        margin-top: 50px;
        font-size: 13px;
        color: #6b7280;
    }

</style>
</head>

<!-- Page Wrapper -->
<body class="boxed_wrapper">


<!-- Main Header -->
<header class="header">

    <!-- Main Header -->
    <div class="main_header">
        <div class="container"> 
            <div class="main_header_inner">
                <div class="main_header_logo">
                    <figure>
                        <a href="index.html"><img src="assets-landing/images/invoice360-logo.png" alt="Companny Logo"></a>
                    </figure>
                </div>
                <div class="main_header_menu menu_area">
                    <!--Mobile Navigation Toggler-->
                    <div class="mobile-nav-toggler">
                        <div class="menu-bar">
                            <i class="fas fa-bars"></i>
                        </div>
                    </div>
                    <nav class="main-menu">
                        <div class="collapse navbar-collapse show" id="navbarSupportedContent">
                            <ul class="navigation">
                                <li><a href="index.php">Home</a></li>
                                <li><a href="index.php#about">About</a></li>
                                <li><a href="index.php#services">Our Solutions</a></li>
                                <li><a href="index.php#billing">Pricing</a></li>
                                <li><a href="index.php#faqs">FAQs</a></li>
                                
                                <li><a href="contact.php">Support</a></li>
                            </ul>
                        </div>
                    </nav>
                </div>
                <div class="header_right_content">
                    
                    <div class="link-btn"><a href="invoice360/sign-in.php" style="background: #040461ff;" class="btn_style_one">Sign In</a></div>
                    <div class="link-btn"><a href="invoice360/sign-in.php?action=signup" style="background: #046831ff;" class="btn_style_one">Free Sign Up</a></div>
                </div> 
            </div>
        </div>
    </div>
    <!-- End Main Header -->

    <!-- Sticky Header-->
    <div class="sticky_header">
        <div class="container">
            <div class="main_header_inner">
                <div class="main_header_logo">
                    <figure>
                        <a href=""><img src="assets-landing/images/invoice360-logo.png" alt="Companny Logo"></a>
                    </figure>
                </div>
                <div class="main_header_menu menu_area">
                    <nav class="main-menu">
                        <!--Keep This Empty / Menu will come through Javascript-->
                    </nav>
                </div>
                <div class="header_right_content">
                    <button class="search-toggler"><i class="icon-50"></i></button>
                    <div class="link-btn"><a href="invoice360/sign-in.php" class="btn_style_one">Get Started</a></div>
                </div> 
            </div>            
        </div> 
    </div>
    <!-- End Sticky Header-->

    <!-- Mobile Menu  -->
    <div class="mobile-menu">
        <div class="menu-backdrop"></div>
        <div class="close-btn">X</div>        
        <nav class="menu-box">
            <div class="nav-logo"><a href="index.html"><img src="assets-landing/images/mobile-logo.png" alt="" title=""></a></div>
            <div class="menu-outer"><!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header--></div>
            <div class="contact-info">
                <h4>Contact Info</h4>
                <ul>
                    <li>Unit 12, The Omotola Plaza, Allen, Ikeja.</li>
                    <li><a href="">+2348164250176</a></li>
                    <li><a href="">info@invoice360.com</a></li>
                </ul>
            </div>
            <ul class="social-links centred">
                <li><a href=""><span class="fab fa-twitter"></span></a></li>
                <li><a href=""><span class="fab fa-facebook-square"></span></a></li>
                <li><a href=""><span class="fab fa-instagram"></span></a></li>
            </ul>
        </nav>
    </div>
    <!-- End Mobile Menu -->

</header>
<!-- End Main Header -->
