<?php require_once('../auth/auth.php'); ?>
<section class="content">
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
				<div class="card card-primary card-outline direct-chat direct-chat-primary shadow-none" style="border-left:1px solid #969c9d;border-right:1px solid #969c9d;border-bottom:1px solid #969c9d;"> 
				  <div class="card-header" style="padding: 3px 8px;">
		            <h3 class="card-title"> Choose Your Best Plan </h3>
		            <div class="card-tools m-0">
		              <button type="button" class="btn btn-tool" data-card-widget="remove" data-dismiss="modal">
		              <i class="fas fa-times"></i>
		              </button>
		            </div>
		          </div>
					<div class="snip1255 card-body p-2">
					  <div class="row">                      
						<div class="col-md-3">
							<div class="plan">
							<header>
								<h4 class="plan-title">
								Starter
								</h4><i class="ion-ios-navigate-outline"></i>
								<div class="plan-cost"><span class="plan-price">1000Tk</span><span class="plan-type"> / 1 Month</span></div>
							</header>
							<ul class="plan-features">
								<li>Master Accounting</li>
								<li>Master Inventory</li>
								<li>Unlimited User</li>
								<li>24/7 Tech Support</li>
								<li>Daily Backups</li>
							</ul>
							<div class="plan-select" onclick="pagecall('../bill_package/package_active.php?pack_id=1','#packagegview',0);"><a href="#">Select Plan</a></div>
						</div>
					</div>
						<div class="col-md-3">
							<div class="plan">
							<header>
								<h4 class="plan-title">Basic</h4><i class="ion-ios-world"></i>
								<div class="plan-cost"><span class="plan-price">3000Tk</span><span class="plan-type"> / 3 Month</span></div>
							</header>
							<ul class="plan-features">
								<li>Master Accounting</li>
								<li>Master Inventory</li>
								<li>Unlimited User</li>
								<li>24/7 Tech Support</li>
								<li>Daily Backups</li>
							</ul>
							<div class="plan-select" onclick="pagecall('../bill_package/package_active.php?pack_id=2','#packagegview',0);"><a href="#">Select Plan</a></div>
						   </div>
						</div>
						<div class="col-md-3">
						  <div class="plan">
							<header>
								<h4 class="plan-title">Professial</h4><i class="ion-ios-people"></i>
								<div class="plan-cost"><span class="plan-price">11000Tk</span><span class="plan-type"> / 1 Year</span></div>
							</header>
							<ul class="plan-features">
								<li>Master Accounting</li>
								<li>Master Inventory</li>
								<li>Unlimited User</li>
								<li>24/7 Tech Support</li>
								<li>Daily Backups</li>
							</ul>
							<div class="plan-select" onclick="pagecall('../bill_package/package_active.php?pack_id=3','#packagegview',0);"><a href="#">Select Plan</a></div>
						   </div>
						</div>
						<div class="col-md-3">
						   <div class="plan">
							<header>
								<h4 class="plan-title">E-commerce</h4><i class="ion-ios-speedometer"></i>
								<div class="plan-cost"><span class="plan-price">Tk5988</span><span class="plan-type"> /1 Year</span></div>
							</header>
							<ul class="plan-features">
								<li>Master Accounting</li>
								<li>Master Inventory</li>
								<li>Unlimited User</li>
								<li>24/7 Tech Support</li>
								<li>Daily Backups</li>
							</ul>
							<div class="plan-select" onclick="pagecall('../bill_package/package_active.php?pack_id=4','#packagegview',0);"><a href="#">Select Plan</a></div>
						  </div>
						</div>
					</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<style type="text/css">
	.snip1255 {
		font-family: sans-serif;
		color: #000000;
		text-align: center;
		font-size: 16px;
		width: 100%;
		margin-bottom: 2px;
	}
	.snip1255 .plan {
		background-color: #e6e6e6;
		border: 1px solid #191919;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	}
	.snip1255 .plan:hover i,
	.snip1255 .plan.hover i {
		-webkit-transform: scale(1.2);
		transform: scale(1.2);
	}
	.snip1255 * {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-transition: all 0.25s ease-out;
		transition: all 0.25s ease-out;
	}
	.snip1255 header {
		position: relative;
		background-color: #262626;
		color: #ffffff;
		padding: 10px 10px;
	}
	.snip1255 header i {
		font-size: 56px;
		margin: 8px 0;
		color: #c0392b;
		display: inline-block;
	}
	.snip1255 .plan-title {
		top: 0;
		font-weight: 500;
		margin: 8px 0;
		text-transform: uppercase;
		font-weight: 400;
		letter-spacing: 1px;
	}
	.snip1255 .plan-cost {
		margin: 8px 0;
	}
	.snip1255 .plan-price {
		font-family:  sans-serif;
		font-weight: 800;
		font-size: 1.3em;
		color: #ffffff;
	}
	.snip1255 .plan-type {
		opacity: 0.8;
		color: #ffffff;
		font-size: 0.7em;
		text-transform: uppercase;
	}
	.snip1255 .plan-features {
		padding: 0;
		margin: 0;
		text-align: center;
		list-style: outside none none;
		font-size: 0.8em;
	}
	.snip1255 .plan-features li {
		border-top: 1px solid rgba(0, 0, 0, 0.2);
		padding: 10px 5%;
		font-weight: 500;
	}
	.snip1255 .plan-features li:nth-child(even) {
		background: rgba(0, 0, 0, 0.08);
	}
	.snip1255 .plan-features i {
		margin-right: 8px;
		opacity: 0.4;
	}
	.snip1255 .plan-select {
		background-color: #191919;
	}
	.snip1255 .plan-select a {
		color: #ffffff;
		text-decoration: none;
		padding: 10px;
		width: 100%;
		font-size: 0.75em;
		font-weight: 600;
		text-transform: uppercase;
		display: inline-block;
	}
	.snip1255 .plan-select a:hover {
		background-color: #262626;
	}
	.snip1255 .featured {
		margin-top: -10px;
		background-color: #262626;
		color: #ffffff;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
		z-index: 1;
	}
	.snip1255 .featured .plan-select a {
		padding: 35px 25px;
	}
	@media only screen and (max-width: 767px) {
		.snip1255 .plan {
			width: 50%;
		}
		.snip1255 .plan-title,
		.snip1255 .plan-select a {
			-webkit-transform: translateY(0);
			transform: translateY(0);
		}
		.snip1255 .plan-select a,
		.snip1255 .featured .plan-select a {
			padding: 10px;
		}
		.snip1255 .featured {
			margin-top: 0;
		}
	}
	@media only screen and (max-width: 440px) {
		.snip1255 .plan {
			width: 100%;
		}
	}
</style>