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

<head>
    <meta charset="utf-8">
    <title>BR Academy - BR Academy Website</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="" name="keywords">
    <meta content="" name="description">

    <!-- Favicon -->
    <link type="image/x-icon" href="img/favicon.ico?v=2" rel="icon">

    <!-- Google Web Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
            href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500&family=Roboto:wght@500;700;900&display=swap"
            rel="stylesheet">

    <!-- Icon Font Stylesheet -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

    <!-- Libraries Stylesheet -->
    <link href="lib/animate/animate.min.css" rel="stylesheet">
    <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">

    <!--W3 STYLESHEET-->
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Customized Bootstrap Stylesheet -->
    <link rel="stylesheet" href="<?php echo $this->request->webroot; ?>css/css_files/bootstrap.min.css">

    <!-- Template Stylesheet -->
    <link rel="stylesheet" href="<?php echo $this->request->webroot; ?>css/css_files/style.css">

    <!-- Template Stylesheet -->
    <link rel="stylesheet" href="<?php echo $this->request->webroot; ?>css/css_files/fileinput.min.css">


    <Style>
        .responseMessage {
            color: green;
            font-weight: 700;
            /* background-color: #cece; */
            padding: 10px;
        }

        .alert {
            padding: 20px;
            color: black;
            transition: opacity 0.6s;
            margin-bottom: 15px;
        }

        .alert.info {
            background-color: #ffc107;
        }

        /* Button styling for the main site */
        button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background-color: transparent;
            /* Main site button color */
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: transparent;
            /* Lighter pink */
        }

        /* Popup styles - encapsulated */
        .custom-popup {
            display: none;
            /* Hidden by default */
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            /* Dark background */
            justify-content: center;
            align-items: center;
            z-index: 1000;
            /* Ensure it appears above other content */
        }

        .custom-popup-content {
            background: #cece;
            /* Gradient background */
            padding: 30px;
            border-radius: 10px;
            text-align: center;
            position: relative;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            z-index: 1001;
            /* Higher than the popup background */
        }

        .custom-popup-title {
            color: white;
            margin: 0;
        }

        .custom-close {
            position: absolute;
            top: 10px;
            right: 20px;
            cursor: pointer;
            font-size: 24px;
            color: green;
        }
    </Style>
</head>

<body>
<!-- Spinner Start -->
<div id="spinner"
     class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
    <div class="spinner-grow text-primary" style="width: 3rem; height: 3rem;" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>
<!-- Spinner End -->

<!-- Navbar Start -->
<nav class="navbar navbar-expand-lg bg-white navbar-light sticky-top p-1">
    <a href="index.html" class="navbar-brand d-flex align-items-center px-4 px-lg-5">
        <!-- <h2 class="m-0 text-primary">BR Academy</h2> -->
<!--        <img class="logo-main" src="./img/logo.png" alt="BRAcademy Logo" />-->
    </a>
    <button type="button" class="navbar-toggler me-4" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <div class="navbar-nav ms-auto p-4 p-lg-0">
            <a href="about-us.html" class="nav-item nav-link ">About us</a>
            <a href="acreditation.html" class="nav-item nav-link ">Accreditation</a>
            <a href="application-process.html" class="nav-item nav-link">Application Process</a>
            <a href="accomodation.html" class="nav-item nav-link">Accomodation</a>
            <a href="courses.html" class="nav-item nav-link">Courses</a>
            <a href="<?php echo $this->Url->build(["controller" => "Student","action" => "verification"]); ?>"
               class="nav-item nav-link">Verification</a>
            <a href="contact.html" class="nav-item nav-link">Contact</a>
            <a href="<?php echo $this->Url->build(["controller" => "Student","action" => "add"]); ?>"
               class="nav-item nav-link d-lg-none">Apply Now</a>
<!--            <a href="apply-form.html" class="nav-item nav-link d-lg-none">Apply Now</a>-->
        </div>

        <a href="<?php echo $this->Url->build(["controller" => "Student","action" => "add"]); ?>"
           class="btn btn-primary py-4 px-lg-5 d-none d-lg-block apply-link">Apply Now<i
                    class="fa fa-arrow-right ms-3"></i></a>

    </div>
</nav>
<!-- Navbar End -->


<!-- Content Wrapper. Contains page content -->

        <?= $this->Flash->render() ?>
        <?= $this->fetch('content') ?>



    <!-- /.content -->

<!-- /.content-wrapper -->

<!-- Footer Start -->
<div class="container-fluid bg-dark text-light footer mt-5 pt-5 wow fadeIn" data-wow-delay="0.1s">
    <div class="container py-5">
        <div class="row g-5">
            <div class="col-lg-3 col-md-6">
                <h4 class="text-light mb-4">Quick Links 1</h4>
                <a class="btn btn-link" href="about-us.html">About Us</a>
                <a class="btn btn-link" href="acreditation.html">Accreditation</a>
                <a class="btn btn-link" href="courses.html">Courses</a>
                <a class="btn btn-link" href="accomodation.html">Accomodation</a>

            </div>
            <div class="col-lg-3 col-md-6">
                <h4 class="text-light mb-4">Quick Links 2</h4>
                <a class="btn btn-link" href="application-process.html">Application Process</a>
                <a class="btn btn-link" href="verification.html">Verification</a>
                <a class="btn btn-link" href="contact.html">Contact Us</a>
                <a class="btn btn-link" href="apply-form.html">Apply Now</a>

            </div>
            <div class="col-lg-3 col-md-6">
                <h4 class="text-light mb-4">Privacy</h4>
                <a class="btn btn-link" href="privacy-policy.html">Privacy Policy</a>
                <!-- <a class="btn btn-link">Terms and Conditions</a> -->

            </div>
            <div class="col-lg-3 col-md-6">
                <h4 class="text-light mb-4">Social Media</h4>
                <div class="d-flex pt-2">
                    <a class="btn btn-outline-light btn-social"><i class="fab fa-twitter"></i></a>
                    <a class="btn btn-outline-light btn-social"><i class="fab fa-facebook-f"></i></a>
                    <a class="btn btn-outline-light btn-social"><i class="fab fa-instagram"></i></a>
                    <a class="btn btn-outline-light btn-social"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="copyright">
            <div class="row">
                <div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
                    &copy; <a>Brooks Resource Academy</a>, All Right Reserved.
                </div>
                <div class="col-md-6 text-center text-md-end">
                    <!-- Designed By <a class="border-bottom" href=""></a> -->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Footer End -->

<!-- Back to Top -->
<a href="#" class="btn btn-lg btn-primary btn-lg-square rounded-0 back-to-top"><i class="bi bi-arrow-up"></i></a>

<!-- JavaScript Libraries -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="lib/wow/wow.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/waypoints/waypoints.min.js"></script>
<script src="lib/counterup/counterup.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<script src="lib/isotope/isotope.pkgd.min.js"></script>
<script src="lib/lightbox/js/lightbox.min.js"></script>

<!-- Template Javascript -->
<script src="<?php echo $this->request->webroot; ?>js/js_file/main.js"></script>



</body>

</html>