 <!DOCTYPE html>
  <html lang="en">
	<head>
		<!-- Meta -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
		<meta name="description" content="Penn - Education HTML Template">
		<meta name="keywords" content="theme_ocean, college, course, e-learning, education, high school, kids, learning, online, online courses, school, student, teacher, tutor, university">
		<meta name="author" content="theme_ocean">
		<!-- SITE TITLE -->
		<title>Robotics Academy</title>			
		<!-- Latest Bootstrap min CSS -->
		<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">		
		<!-- Google Font -->
		<link href="https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
		<!-- Font Awesome CSS -->
		<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
		<link rel="stylesheet" href="assets/fonts/themify-icons.css">
		<!--- owl carousel Css-->
		<link rel="stylesheet" href="assets/owlcarousel/css/owl.carousel.css">
		<link rel="stylesheet" href="assets/owlcarousel/css/owl.theme.css">				
		<!--slicknav Css-->
        <link rel="stylesheet" href="assets/css/slicknav.css">		
		<!-- MAGNIFIC CSS -->
		<link rel="stylesheet" href="assets/css/magnific-popup.css">	
		<!-- animate CSS -->
		<link rel="stylesheet" href="assets/css/animate.css">			
		<!-- Style CSS -->					
		<link rel="stylesheet" href="assets/css/style.css" />
        <!-- Add in <head> -->
        <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600&display=swap" rel="stylesheet">
        
        <link rel="stylesheet" href="assets/css/niceselect.css" />	
		<link rel="stylesheet" href="assets/css/shop.css" />	
        
		<script src="assets/js/jquery-1.12.4.min.js"></script>
        <script src="include/validation.js"></script>
        <script src="include/ajax_functions.js"></script>
      
					
		
</head>
<body>

<style>
/* 1. The Parent List Item */
.dropdown-mega {
    position: relative; /* This keeps the menu attached to the link */
}

/* 2. The Mega Menu Box */
.mega-menu-content {
    position: absolute;
    top: 100%;
    left: 0; /* Align to the start of 'State Requirements' */
    width: 700px; /* Adjust this width based on your design */
    background: #ffffff;
    padding: 20px;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.1);
    border-top: 3px solid #ff0080; /* The pink line from the image */
    display: none; 
    z-index: 999;
}

/* 3. Show on Hover */
.dropdown-mega:hover .mega-menu-content {
    display: block;
}

/* 4. Column Styling */
.mega-col {
    float: left;
    width: 20%; /* This creates exactly 5 columns (100 / 5 = 20) */
}

.mega-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mega-col ul li a {
    color: #4a148c !important; /* The purple text from the image */
    font-size: 13px;
    padding: 5px 10px;
    display: block;
    text-decoration: none;
    transition: 0.2s;
}

.mega-col ul li a:hover {
    color: #ff0080 !important; /* Pink hover color */
    background: #fdf2f8;
}

/* 5. Clearfix for the row */
.mega-menu-content .row::after {
    content: "";
    display: table;
    clear: both;
}
</style>
	
	<!-- START PRELOADER -->
    <div id="loader-wrapper">
        <div id="loader"></div>
        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
    </div>
	<!-- END PRELOADER -->

 <div class="col-lg-12 col-md-12 col-sm-12">	
	<!-- START LOGO WITH CONTACT -->
	<section class="logo-contact">
		<div class="container">
			<div class="row">
				<div class="col-lg-7 col-md-6 col-sm-6 col-xs-12">
					<div class="single-top-contact">
						<i class="fa fa-envelope"></i>
						<h4><a href="mailto:example@gmail.com">example@mail.com</a></h4>
					</div>
				</div><!--- END COL -->	
				
				<div class="col-lg-5 col-md-6 col-sm-6 col-xs-12">
					<div class="top_social_profile">
						<ul>
                        	<li><a href="<?php if(empty($_SESSION['login_id'])){ ?> login.php <?php } ?>" class="top_f_facebook"><i class="ti-comment"></i> Chat</a></li> 
							<li><a href="<?php if(empty($_SESSION['login_id'])){ ?> login.php <?php } ?>" class="top_f_facebook"><i class="ti-search"></i> Search</a></li>
                             <?php if(empty($_SESSION['login_id'])){ ?>
							<li><a href="login.php" class="top_f_facebook"><i class="ti-user"></i> Login</a></li>
                            
							<li><a href="login.php" class="top_f_facebook"><i class="ti-shopping-cart-full"></i></a></li>  
                            <?php } ?>                          
						</ul>
                        
					</div>
				</div><!--- END COL -->						
                
               
                
			</div><!--- END ROW -->
		</div><!--- END CONTAINER -->
	</section>
    </div>
 
    
	<!-- END LOGO WITH CONTACT -->
	<?php if(empty($_SESSION['login_id'])){ ?>
	<!-- START NAVBAR -->  
	<div id="navigation" class="navbar-light bg-faded site-navigation">
		<div class="container">
			<div class="row">
				<div class="col-lg-2 col-md-3 col-sm-4">
					<div class="site-logo">
						<a href="index.php"><img src="assets/images/all-img/logo.jpg" alt=""></a>	
                    </div>
				</div><!--- END Col -->
				
				<div class="col-lg-8 col-md-7 col-sm-6 ">
					<div class="header_right ">
						<nav id="main-menu" class="ms-auto">
							<ul>
								<li class="dropdown-mega">
    <a class="nav-link" href="#">State Requirements</a>
    <div class="mega-menu-content">
        <div class="row">
            <div class="mega-col">
                <ul>
                    <li><a href="#">Alabama</a></li>
                    <li><a href="#">Alaska</a></li>
                    <li><a href="#">Arizona</a></li>
                    <li><a href="#">Arkansas</a></li>
                    <li><a href="#">California</a></li>
                    <li><a href="#">Colorado</a></li>
                    <li><a href="#">Connecticut</a></li>
                    <li><a href="#">Delaware</a></li>
                </ul>
            </div>
            <div class="mega-col">
                <ul>
                    <li><a href="#">Georgia</a></li>
                    <li><a href="#">Hawaii</a></li>
                    <li><a href="#">Idaho</a></li>
                    <li><a href="#">Illinois</a></li>
                    <li><a href="#">Indiana</a></li>
                    <li><a href="#">Iowa</a></li>
                    <li><a href="#">Kansas</a></li>
                    <li><a href="#">Kentucky</a></li>
                </ul>
            </div>
            </div>
    </div>
</li>
								<li><a class="nav-link" href="#">Group Savings </a></li>
							    <li><a class="nav-link" href="#">Video Library & Coaching</a></li>  
                                <li><a class="nav-link" href="#">Resources</a></li>
							</ul>
						</nav>
						<div id="mobile_menu"></div>
					</div>
				</div><!--- END Col -->
				<div class="col-lg-2 col-md-2 col-sm-2">
					<div class="call_to_action">
						<a class="btn_one" href="filter_courses.php">Shop Courses</a>					
                    </div><!--- END SOCIAL PROFILE -->					
				</div><!--- END Col -->
			</div><!--- END ROW -->
		</div><!--- END CONTAINER -->
	</div> 	  
	<!-- END NAVBAR -->
    
    <?php } else { ?>
	
    <div id="navigation" class="navbar-light bg-faded site-navigation">
		<div class="container">
			<div class="row">
				<div class="col-lg-2 col-md-3 col-sm-2">
					<div class="site-logo">
						<a href="dashboard.php"><img src="assets/images/all-img/logo.jpg" alt=""></a>          			        				
					</div>
				</div><!--- END Col -->
				
				<div class="col-lg-6 col-md-9 col-sm-8 ">
					<div class="header_right ">
						<nav id="main-menu" class="ms-auto">
							<ul>
							    <li><a class="nav-link" href="index.php">Home</a></li>
                                <li><a class="nav-link" href="dashboard.php">Dashboard</a></li>
                                <li><a class="nav-link" href="filter_courses.php">Available Courses</a> </li>
								<!--<li><a class="nav-link" href="course.php">Available Courses</a> </li>-->
                                <li><a class="nav-link" href="view_courses.php">My Courses</a> </li>
								
							    <li><a class="nav-link" href="contact_us.php">Contact</a></li>
							</ul>
						</nav>
						<div id="mobile_menu"></div>
					</div>
				</div><!--- END Col -->
				<div class="col-lg-4 col-md-3 col-sm-2">
					<div class="home_lc">
						<a href="<?php if($cntcheckout==0){ ?> cart.php <?php } else { ?> check_out.php <?php } ?>" class="hlc">
						  <i class="ti-shopping-cart-full"></i>
						  <span class="gactive"><?php echo $cntnotification; ?></span>
					   </a>
					</div>
					<div class="call_to_action">
						<a class="btn_one" href="change_password.php">Change Password</a>
						<a class="btn_two" href="logout.php">Logout</a>
					</div><!--- END SOCIAL PROFILE -->					
				</div><!--- END Col -->
			</div><!--- END ROW -->
		</div><!--- END CONTAINER -->
	</div> 	 
    
    <?php } ?>
	
    <!-- START HOME -->
	<section  id="home" class="home_bg" style="background-image: url(assets/images/banner/home.png);  background-size:cover; background-position: center center;">	
		<div class="container">
			<div class="row">
				<div class="col-lg-6 col-sm-6 col-xs-12">	
					<div class="home_content">
						<h1>Better <span>Learning Future</span> Starts With Penn</h1>
						<p>It is a long established fact that reader will be distracted readable content of a page when.</p>						
					</div>
					<div class="home_btn">
						<a href="#" class="cta"><span>Explore Courses</span>
						  <svg width="13px" height="10px" viewBox="0 0 13 10">
							<path d="M1,5 L11,5"></path>
							<polyline points="8 1 12 5 8 9"></polyline>
						  </svg>
						</a>
					</div>		
				</div><!-- END COL-->
				<div class="col-lg-6 col-sm-6 col-xs-12">	
					<div class="home_me_img">
						<img src="assets/images/all-img/home-image.png" class="img-fluid" alt="" />
						<div class="home_ps">
							<img src="assets/images/icon/user2.svg" alt="" />
							<h2>7500+</h2>
							<span>Active student</span>
						</div>
						<div class="home_ps2">
							<img src="assets/images/icon/file2.svg" alt="" />
							<h2>4500+</h2>
							<span>Online Course</span>
						</div>
					</div>		
				</div><!-- END COL-->
			</div><!--- END ROW -->			
		</div><!--- END CONTAINER -->
	</section>
	<!-- END  HOME -->

	<!-- START TOP PROMO FEATURES -->
	<section class="tp_feature">
	   <div class="container-fluid">			
			<div class="row">					
				<div class="col-lg-4 col-sm-4 col-xs-12 no-padding wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.2s" data-wow-offset="0">
					<div class="single_tp">
						<h3>Quality Education</h3>
						<p>Lorem ipsum dolor sit amet, consectetur notted adipisicing elit sed do eiusmod tempor incididunt ut labore.</p>
						<a href="#" class="cta"><span>Explore</span>
						  <svg width="13px" height="10px" viewBox="0 0 13 10">
							<path d="M1,5 L11,5"></path>
							<polyline points="8 1 12 5 8 9"></polyline>
						  </svg>
						</a>
					</div>
				</div><!-- END COL -->			
				<div class="col-lg-4 col-sm-4 col-xs-12 no-padding wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.3s" data-wow-offset="0">
					<div class="single_tp">
						<h3>Experienced Teachers</h3>
						<p>Lorem ipsum dolor sit amet, consectetur notted adipisicing elit sed do eiusmod tempor incididunt ut labore.</p>
						<a href="#" class="cta"><span>Explore</span>
						  <svg width="13px" height="10px" viewBox="0 0 13 10">
							<path d="M1,5 L11,5"></path>
							<polyline points="8 1 12 5 8 9"></polyline>
						  </svg>
						</a>
					</div>
				</div><!-- END COL -->			
				<div class="col-lg-4 col-sm-4 col-xs-12 no-padding wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.4s" data-wow-offset="0">
					<div class="single_tp">
						<h3>Delicious Food</h3>
						<p>Lorem ipsum dolor sit amet, consectetur notted adipisicing elit sed do eiusmod tempor incididunt ut labore.</p>
						<a href="#" class="cta"><span>Explore</span>
						  <svg width="13px" height="10px" viewBox="0 0 13 10">
							<path d="M1,5 L11,5"></path>
							<polyline points="8 1 12 5 8 9"></polyline>
						  </svg>
						</a>
					</div>
				</div><!-- END COL -->							
			</div><!-- END ROW -->
		</div><!-- END CONTAINER -->
	</section>
	<!-- END TOP PROMO FEATURES -->	
    
    
    <?php include_once('footer.php'); ?>