<?php $actual_link = (empty($_SERVER['HTTPS']) ? 'http' : 'https') . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; ?>
<script src="https://www.gstatic.com/firebasejs/9.1.2/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.1.2/firebase-auth-compat.js"></script>
<div class="mainSection" style="background:#102349 !important;">
    <div class="sptb-1" style="padding-top: 70px;">
        <div class="header-text1 mb-0">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <h1 class=" display-5 font-weight-semibold text-white"><?php echo $data->mc_course_title; ?></h1>
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-12 order-2 order-lg-1">
                        <div>

                            <p class=" lead text-white"> <?php echo $data->mc_course_short_description; ?></p>
                            <?php $tarinner_details =  json_decode($data->mc_course_tarinner_details, true); ?>

                            <div class="d-flex align-items-center mobile-center">
                                <div class="d-inline-block"><img class="w-16 h-18 rounded-lg" src="<?php echo base_url(); ?><?php echo $data->mc_course_trainner_image; ?>"></div>
                                <div class="d-inline-block text-white">
                                    <div class="text-white ms-3">
                                        <h4><b class="text-white"><?php echo $tarinner_details['tarinner_name']; ?></b></h4>
                                        <?php echo $tarinner_details['tarinner_position']; ?>
                                    </div>
                                </div>
                            </div>
                            <?php $timing_details =  json_decode($data->mc_course_timing_details, true); ?>
                            <div class="d-block d-md-flex align-items-center mb-5 mt-4">

                                <span class=" ms-3 text-warning"><i class="fe fe-clock "></i> <?php echo $timing_details['course_timing']; ?> Min. </span>

                                <span class="ms-4">
                                    <i class="fa fa-star text-warning"></i>
                                    <span class="text-warning"><?php echo $timing_details['course_rating']; ?> Rating</span>
                                </span>

                                <span class="ms-3 text-warning"><i class="fe fe-users "></i> <?php echo $timing_details['course_enrolled']; ?> Enrolled</span>
                            </div>

                            <div class="text-center-2 ">
                                <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#signInModal" class="btn-secondary button-signin btn btn-lg shake" style="border-radius: 30px;background-color: #BE1502 !important;border-color: #BE1502 !important;color: #fff;width: 50%;border: 0;">Start Master Class<span class="text-white">&nbsp;&nbsp;<i class="fa fa-video-camera ms-1 text-white"></i></span></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-12 order-1 order-lg-2">
                        <div class="card ">
                            <div class="card-body" style="padding: 0;">
                                <?php if (isset($_GET['g'])) : ?>
                                    <style>
                                        .card {
                                            background-color: inherit;
                                            border: inherit;
                                        }
                                    </style>
                                    <div class="card">
                                        <video style="border-radius: 7px;" controls id="video-player-3" class="video-player" poster="<?php echo base_url(); ?><?php echo $data->mc_course_video_banner; ?>">
                                            <source id="video-source" src="">
                                            Your browser does not support the video tag.
                                        </video>
                                    </div>
                                    <script>
                                        $(document).ready(function() {
                                            var videoId = '<?php echo $data->mc_course_video_id; ?>';

                                            $.ajax({
                                                url: '<?php echo base_url(); ?>home/fetch_master_class_video',
                                                type: 'POST',
                                                data: {
                                                    video_id: videoId
                                                },
                                                success: function(response) {
                                                    var data = JSON.parse(response);
                                                    var blobUrl = 'data:video/mp4;base64,' + data.videoData;
                                                    $('#video-source').attr('src', blobUrl);
                                                    document.getElementById('video-player-3').load();
                                                },
                                                error: function(error) {
                                                    console.log('Error fetching video data:', error);
                                                }
                                            });
                                        });
                                    </script>
                                <?php else : ?>
                                    <div class="product-slider">
                                        <ul class="list-unstyled video-list-thumbs">
                                            <li class="mb-0">
                                                <a data-bs-toggle="modal" data-bs-target="#signInModal" class="class-video p-0">
                                                    <img loading="lazy" src="<?php echo base_url(); ?><?php echo $data->mc_course_video_banner; ?>" alt="<?php echo $data->mc_course_title; ?>" class="img-responsive  border br-7">
                                                    <span class="video-icon" href="javascript:void(0)"><i class="fe fe-play"></i></span>
                                                </a>

                                            </li>
                                        </ul>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="signInModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="border-bottom: 0;">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <?php echo
            form_open(base_url() . 'home/submit_master_class_form');
            ?>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-6 d-none d-lg-block">
                            <img src="<?php echo base_url(); ?>assets/login-ui-img.svg">
                        </div>
                        <div class="col-sm-6 text-center">

                            <div id="step_1">
                                <h2>Login or Register</h2>
                                <div id="phoneNumberContainer" class="mt-5 input-with-flag">
                                    <img src="<?php echo base_url(); ?>assets/flag.jpg" alt="Indian Flag">
                                    <input id="phoneNumber" class="form-control form-field" placeholder="Enter Your Mobile No" style="height: 60px; border: 1px solid #acacaf;">
                                </div>
                                <div id="recaptcha-container"></div>
                                <div class="bottom-button-wrapper" style="position: absolute; bottom: 0; width: 95%;">
                                    <button id="sendOtpButton" type="button" class="btn btn-primary bottom-button account__login--btn" style="width: 100%;" disabled>
                                        <span class="button-text">Process</span>
                                        <span class="loaderButton" style="display: none;"></span>
                                    </button>
                                </div>
                            </div>

                            <div id="step_2" style="display: none;">
                                <h2>Enter OTP</h2>
                                <div class="mt-5">
                                    <div class="otp-inputs">
                                        <input type="number" maxlength="1" class="otp-input">
                                        <input type="number" maxlength="1" class="otp-input">
                                        <input type="number" maxlength="1" class="otp-input">
                                        <input type="number" maxlength="1" class="otp-input">
                                        <input type="number" maxlength="1" class="otp-input">
                                        <input type="number" maxlength="1" class="otp-input">
                                    </div>
                                </div>
                                <div class="bottom-button-wrapper" style="position: absolute; bottom: 0; width: 95%;">
                                    <button disabled id="verifyOtpButton" type="button" class="btn btn-primary bottom-button" style="width: 100%;">
                                        <span class="button-text">Verify OTP</span>
                                        <span class="loaderButton" style="display: none;"></span>
                                    </button>
                                </div>
                            </div>

                            <div id="step_3" style="margin-top: -20px;display: none;">
                                <h4>Please Enter Your Details to proceed</h4>
                                <p>These details will be added to your certificate.</p>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="custom-field">
                                            <input type="text" placeholder=" " required>
                                            <label for="exampleInput" class="placeholderfiled">First Name *</label>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="custom-field">
                                            <input type="text" placeholder=" " required>
                                            <label for="exampleInput" class="placeholderfiled">Last Name *</label>
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class="custom-field">
                                            <input type="email" placeholder=" " required>
                                            <label for="exampleInput" class="placeholderfiled">Email *</label>
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class="custom-field">
                                            <select type="email" placeholder=" " required>
                                                <option value="Business Owner">Business Owner</option>
                                                <option value="Undergrade Student">Undergrade Student</option>
                                                <option value="Final Year Student">Final Year Student</option>
                                                <option value="Graduate">Graduate</option>
                                                <option value="Working Professional">Working Professional</option>
                                                <option value="Other">Other</option>
                                            </select>
                                            <label for="exampleInput" class="placeholderfiled">Who Are You *</label>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="custom-field">
                                            <input type="date" placeholder=" " required>
                                            <label for="exampleInput" class="placeholderfiled">Date of Birth *</label>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="custom-field">
                                            <input type="text" placeholder=" " required>
                                            <label for="exampleInput" class="placeholderfiled">City *</label>
                                        </div>
                                    </div>
                                    <input type="hidden" value="<?php echo $actual_link; ?>" name="actual_link">
                                </div>
                                <div class="bottom-button-wrapper" style="position: absolute; bottom: 0; width: 95%;">
                                    <button type="sbmit" class="btn btn-primary bottom-button" style="width: 100%;">
                                        <span class="button-text">Start learning</span>
                                        <span class="loaderButton" style="display: none;"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <?php echo
        form_close();
        ?>
    </div>
</div>


<section class="pt-5 sptb bg-white overview">
    <div>
        <div class="content-text mb-0">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="section-title pb-4">
                            <?php $heading_1 =  json_decode($data->mc_course_heading_1, true); ?>
                            <?php $heading_1_data =  json_decode($data->mc_course_heading_1_data, true); ?>
                            <h2><?php echo $heading_1['heading']; ?></h2>
                            <hr />
                            <p class="fs-18 mt-6"><?php echo $heading_1['sub_heading']; ?></p>
                        </div>
                        <ul class="list-style fs-18 student-feature-icons">
                            <?php foreach ($heading_1_data as $key => $data_1) : ?>
                                <li class="py-2"><i class="fe fe-check me-3"></i><?php echo $data_1['title']; ?></li>
                            <?php endforeach; ?>
                        </ul>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="pt-5 sptb what-you-learn">
    <div>
        <div class="content-text mb-0">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="section-title pb-4">
                            <?php $heading_2 =  json_decode($data->mc_course_heading_2, true); ?>
                            <h2><?php echo $heading_2['heading']; ?></h2>
                            <hr />
                            <p class="fs-18 mt-6"><?php echo $heading_2['sub_heading']; ?></p>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="accordion" id="accordionExample">
                            <?php $allLession =  json_decode($data->mc_course_heading_2_faq, true); ?>
                            <?php foreach ($allLession as $key => $lessaion) : ?>
                                <div class="accordion-item mt-3">
                                    <h2 class="accordion-header" id="headingOneFaq_<?php echo $key; ?>">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOneFaq_<?php echo $key; ?>" aria-expanded="true" aria-controls="collapseOneFaq_<?php echo $key; ?>"><?php echo $lessaion['course']; ?></button>
                                    </h2>
                                    <div id="collapseOneFaq_<?php echo $key; ?>" class="accordion-collapse collapse" aria-labelledby="headingOneFaq_<?php echo $key; ?>" data-bs-parent="#accordionExample">
                                        <div class="accordion-body"><?php echo $lessaion['content']; ?></div>
                                    </div>
                                </div>
                            <?php endforeach; ?>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="sptb bg-white meet-trainer">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div class="video-section">
                    <div class="section-title">
                        <?php $heading_3 =  json_decode($data->mc_course_heading_3, true); ?>
                        <?php $heading_3_data =  json_decode($data->mc_course_heading_3_data, true); ?>
                        <h2><?php echo $heading_3['heading']; ?></h2>
                        <hr />
                    </div>
                    <p class="fs-18 mt-4"><?php echo $heading_3['sub_heading']; ?></p>
                    <ul class="list-style fs-18 student-feature-icons">
                        <?php foreach ($heading_3_data as $key => $data_3) : ?>
                            <li class="py-2"><i class="fe fe-check me-3"></i><?php echo $data_3['title']; ?></li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            </div>
            <div class="col-md-4">
                <div class=""> <img src="<?php echo base_url(); ?><?php echo $data->mc_course_heading_3_image; ?>" alt="img" class=""> </div>
            </div>
        </div>
    </div>
</section>


<section class="pt-5 pb-5 timing">
    <div class="container text-center">
        <div class="row">
            <div class="col-md-12">
                <div class="video-section">
                    <h2 class="mt-0 font-weight-bold">Free Registration Ends in</h2>
                    <div class="countdown-container">
                        <div id="countdown" class="time">
                            <!-- Countdown timer will be inserted here -->
                        </div>
                    </div>
                    <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#signInModal" class="btn-secondary btn btn-lg shake" style="border-radius: 30px;background-color: #BE1502 !important;border-color: #BE1502 !important;color: #fff;width: 50%;border: 0;">Enroll Now<span class="text-white">&nbsp;&nbsp;<i class="fa fa-video-camera ms-1 text-white"></i></span></a>
                </div>
            </div>

        </div>
    </div>
</section>

<section class="sptb bg-white recognized">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div class="video-section">
                    <div class="section-title">
                        <?php $heading_3 =  json_decode($data->mc_course_heading_4, true); ?>
                        <h2><?php echo $heading_3['heading']; ?></h2>
                        <hr />
                    </div>
                    <p class="fs-18 mt-4"><?php echo $heading_3['sub_heading']; ?></p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="text-center"> <img src="<?php echo base_url(); ?><?php echo $data->mc_course_heading_4_image; ?>" alt="img" class=""> </div>
            </div>
        </div>
    </div>
</section>

<section class="sptb reviews">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div class="video-section">
                    <div class="section-title">
                        <h2>Reviews and Testimonials</h2>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div id="myCarousel" class="owl-carousel testimonial-owl-carousel">
                    <?php foreach ($all_review as $key => $review) : ?>
                        <div class="item text-center">
                            <div class="card">
                                <div class="card-status bg-success br-te-7 br-ts-7"></div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-xl-12 col-md-12 d-block mx-auto">
                                            <div class="testimonia1">
                                                <p class="fs-16"> <i class="fa fa-quote-left fa-3x d-block opacity-2"></i><?php echo $review->review_description; ?> </p><img src="<?php echo base_url(); ?><?php echo $review->review_photo; ?>" class="mx-auto d-block brround mb-3 mt-6 w-9 h-9" alt="img">
                                                <h3 class="title fs-18 font-weight-semibold"><?php echo $review->review_name; ?></h3> <span class="post"><?php echo $review->review_position; ?></span>
                                                <div class="star-ratings start-ratings-main clearfix mt-2">
                                                    <div class="stars stars-example-fontawesome stars-example-fontawesome-sm">
                                                        <div class="br-wrapper br-theme-fontawesome-stars"><select class="example-fontawesome" name="rating" autocomplete="off" style="display: none;">
                                                                <option value="1">1</option>
                                                                <option value="2">2</option>
                                                                <option value="3">3</option>
                                                                <option value="4">4</option>
                                                                <option value="5" selected="">5</option>
                                                            </select>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="sptb bg-white pt-0">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div class="video-section">
                    <div class="section-title">
                        <h2><?php echo $data->mc_course_heading_faq; ?></h2>
                        <hr />
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="accordion" id="accordionExample">
                    <?php $allFaq =  json_decode($data->mc_course_heading_faq_data, true); ?>
                    <?php foreach ($allFaq as $keyData => $faq) : ?>
                        <div class="accordion-item mt-3">
                            <h2 class="accordion-header" id="headingOne_<?php echo $keyData; ?>">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne_<?php echo $keyData; ?>" aria-expanded="true" aria-controls="collapseOne_<?php echo $keyData; ?>"><?php echo $faq['title']; ?></button>
                            </h2>
                            <div id="collapseOne_<?php echo $keyData; ?>" class="accordion-collapse collapse" aria-labelledby="headingOne_<?php echo $keyData; ?>" data-bs-parent="#accordionExample">
                                <div class="accordion-body"><?php echo $faq['content']; ?></div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="d-lg-none footer_sticky">
    <div class="container">
        <div class="row text-center">
            <div class="col-5">
                <h5 class="text-white">Join Free Masterclass</h5>
            </div>
            <div class="col-7">
                <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#signInModal" class="btn-secondary button-signin btn btn-lg shake" style="background-color: #BE1502 !important;border-color: #BE1502 !important;color: #fff;width: 50%;border: 0;">Start Now</a>
            </div>
        </div>
    </div>
</div>
<style>
    .footer_sticky {
        position: fixed !important;
        z-index: 9999;
        justify-content: center !important;
        align-items: center !important;
        display: none;
        bottom: 0;
        background: var(--theme-color-1);
        color: #fff;
        padding: 20px;
        width: 100%;
        /* Ensure it takes up the full width */
        box-sizing: border-box;
        /* Ensure padding is included in width */
    }
</style>
<section class="sptb text-center">
    <p>© Copyright 2024 Dotcomvidya.</p>
</section>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Create an Intersection Observer instance
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                const footerSticky = document.querySelector('.footer_sticky');
                if (entry.isIntersecting) {
                    footerSticky.style.display = ' none'; // Show footer
                } else {
                    footerSticky.style.display = 'block'; // Hide footer
                }
            });
        }, {
            threshold: [0] // Trigger the observer when any part of the element is visible
        });

        // Target the overview section
        const overviewSection = document.querySelector('.mainSection');
        observer.observe(overviewSection);
    });
    $(document).ready(function() {
        var confirmationResult; // Declare globally to use in both functions

        function validateForm() {
            var phone = $('#phoneNumber').val().trim();
            var phoneValid = /^\d{10}$/.test(phone);
            $('.account__login--btn').prop('disabled', !phoneValid);
        }

        $('.form-field').on('input', function() {
            validateForm();
        });

        document.getElementById('sendOtpButton').addEventListener('click', function() {
            var phoneNumber = document.getElementById('phoneNumber').value;

            // Show loader and disable button
            var sendOtpButton = document.getElementById('sendOtpButton');
            var loader = sendOtpButton.querySelector('.loaderButton');
            var buttonText = sendOtpButton.querySelector('.button-text');

            loader.style.display = 'inline-block';
            buttonText.style.display = 'none';
            sendOtpButton.classList.add('button-loading');

            // Your Firebase configuration
            const firebaseConfig = {
                apiKey: "AIzaSyAlfb-Z0KUHo66Z5de-Dm9HEtJE6Oq8H30",
                authDomain: "dotcom-vidya-f38f2.firebaseapp.com",
                projectId: "dotcom-vidya-f38f2",
                storageBucket: "dotcom-vidya-f38f2.appspot.com",
                messagingSenderId: "839557496405",
                appId: "1:839557496405:web:4bc23c520256c6340ededc"
            };
            // Initialize Firebase
            firebase.initializeApp(firebaseConfig);

            // Initialize reCAPTCHA verifier
            var appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
                size: 'invisible', // Use invisible reCAPTCHA
                callback: function(response) {
                    // reCAPTCHA solved
                },
                'expired-callback': function() {
                    // Response expired
                }
            });

            appVerifier.render().then(function(widgetId) {
                window.recaptchaWidgetId = widgetId;
            });

            firebase.auth().signInWithPhoneNumber('+91' + phoneNumber, appVerifier)
                .then(function(result) {
                    confirmationResult = result; // Set the global confirmationResult

                    // Fade out step_1 and fade in step_2
                    $('#step_1').fadeOut('slow');
                    $('#step_2').fadeIn('slow');

                    // Hide loader and re-enable button
                    loader.style.display = 'none';
                    buttonText.style.display = 'inline';
                    sendOtpButton.classList.remove('button-loading');
                }).catch(function(error) {
                    console.error('Error during signInWithPhoneNumber', error);

                    // Hide loader and re-enable button in case of error
                    loader.style.display = 'none';
                    buttonText.style.display = 'inline';
                    sendOtpButton.classList.remove('button-loading');
                });
        });

        document.getElementById('verifyOtpButton').addEventListener('click', function() {
            var otp = '';
            document.querySelectorAll('.otp-input').forEach(function(input) {
                otp += input.value;
            });

            // Check if OTP length is correct (assuming it's 6 digits)
            if (otp.length !== 6) {
                console.error('OTP must be 6 digits long');
                return;
            }

            // Show loader and disable button
            var verifyOtpButton = document.getElementById('verifyOtpButton');
            var loader = verifyOtpButton.querySelector('.loaderButton');
            var buttonText = verifyOtpButton.querySelector('.button-text');

            loader.style.display = 'inline-block';
            buttonText.style.display = 'none';
            verifyOtpButton.classList.add('button-loading');

            if (!confirmationResult) {
                console.error('No confirmation result available');
                return;
            }

            confirmationResult.confirm(otp).then(function(result) {
                var user = result.user;
                // window.location.href = "<?php //echo $actual_link; 
                                            ?>?g=1";

                $('#step_2').fadeOut('slow');
                $('#step_3').fadeIn('slow');

                // Hide loader and re-enable button
                loader.style.display = 'none';
                buttonText.style.display = 'inline';
                verifyOtpButton.classList.remove('button-loading');
            }).catch(function(error) {
                console.error('Error during confirmationResult.confirm', error);

                // Hide loader and re-enable button in case of error
                loader.style.display = 'none';
                buttonText.style.display = 'inline';
                verifyOtpButton.classList.remove('button-loading');
            });
        });

    });

    function validateOTP() {
        // Check if all OTP inputs have a value
        let allFilled = true;
        $('.otp-input').each(function() {
            if (this.value.length === 0) {
                allFilled = false;
            }
        });
        // Enable the verify button if all OTP fields are filled
        $('#verifyOtpButton').attr('disabled', !allFilled);
    }

    $('.otp-input').on('input', function() {
        if (this.value.length === this.maxLength) {
            $(this).next('.otp-input').focus();
        }
        validateOTP();
    }).on('keydown', function(e) {
        if (e.key === 'Backspace' && this.value.length === 0) {
            $(this).prev('.otp-input').focus().val('').trigger('input');
        }
    });
    // Set the date we're counting down to (1 hour from now)
    const targetDate = new Date(new Date().getTime() + 1 * 60 * 60 * 1000);

    // Update the countdown every 1 second
    const interval = setInterval(function() {
        const now = new Date().getTime();
        const distance = targetDate - now;

        // Calculate hours, minutes, and seconds
        const hours = Math.floor((distance % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
        const minutes = Math.floor((distance % (60 * 60 * 1000)) / (60 * 1000));
        const seconds = Math.floor((distance % (60 * 1000)) / 1000);

        // Display the result with classes for styling
        document.getElementById('countdown').innerHTML =
            '<div class="time-unit">' + hours.toString().padStart(2, '0') + '<div class="timeMode">Hours</div></div>' +
            ':' +
            '<div class="time-unit">' + minutes.toString().padStart(2, '0') + '<div class="timeMode">Minutes</div></div>' +
            ':' +
            '<div class="time-unit">' + seconds.toString().padStart(2, '0') + '<div class="timeMode">Seconds</div></div>';

        // If the countdown is finished, display a message
        if (distance < 0) {
            clearInterval(interval);
            document.getElementById('countdown').innerHTML = "EXPIRED";
        }
    }, 1000);
</script>

<style>
    .accordion-button:not(.collapsed) {
        color: #000;
        background-color: #fff;
        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
    }

    .sticky-wrapper,
    .cover-image {
        display: none;
    }

    hr {
        margin-top: 1rem;
        margin-bottom: 1rem;
        height: 3px !important;
        color: #102349;
        opacity: 1;
        width: 20%;
    }

    .rounded-lg {
        border-radius: .5rem !important;
    }

    .w-16 {
        width: 4rem !important;
    }

    .h-18 {
        height: 4.5rem !important;
    }

    .shake:hover {
        animation: shake 150ms 2 linear;
        -moz-animation: shake 150ms 2 linear;
        -webkit-animation: shake 150ms 2 linear;
        -o-animation: shake 150ms 2 linear;
    }

    @keyframes shake {
        0% {
            transform: translate(3px, 0);
        }

        50% {
            transform: translate(-3px, 0);
        }

        100% {
            transform: translate(0, 0);
        }
    }

    @-moz-keyframes shake {
        0% {
            -moz-transform: translate(3px, 0);
        }

        50% {
            -moz-transform: translate(-3px, 0);
        }

        100% {
            -moz-transform: translate(0, 0);
        }
    }

    @-webkit-keyframes shake {
        0% {
            -webkit-transform: translate(3px, 0);
        }

        50% {
            -webkit-transform: translate(-3px, 0);
        }

        100% {
            -webkit-transform: translate(0, 0);
        }
    }

    @-ms-keyframes shake {
        0% {
            -ms-transform: translate(3px, 0);
        }

        50% {
            -ms-transform: translate(-3px, 0);
        }

        100% {
            -ms-transform: translate(0, 0);
        }
    }

    @-o-keyframes shake {
        0% {
            -o-transform: translate(3px, 0);
        }

        50% {
            -o-transform: translate(-3px, 0);
        }

        100% {
            -o-transform: translate(0, 0);
        }
    }

    video::-webkit-media-controls-timeline {
        display: none;
    }

    .input-with-flag {
        position: relative;
    }

    .input-with-flag img {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        /* height: 30px; */
        width: 30px;
    }

    .input-with-flag input {
        padding-left: 50px;
        /* Add space for the flag */
    }

    /* video::-webkit-media-controls {
        display: none;
    } */
    .accordion-button::after {
        -webkit-filter: grayscale(1) invert(1);
        filter: grayscale(1) invert(1);
    }

    .video-icon:hover i {
        background-color: var(--theme-color-1);
        color: #fff;
    }

    .bg-success {
        background-color: var(--theme-color-1) !important;
    }

    footer {
        display: none;
    }

    .grecaptcha-badge {
        height: 60px;
        display: block;
        transition: right 0.3s;
        position: fixed;
        bottom: 14px;
        left: 0 !important;
        box-shadow: gray 0px 0px 5px;
        border-radius: 2px;
        overflow: hidden;
        top: 0px !important;
    }

    .loaderButton {
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        animation: spin 1s linear infinite;
        display: inline-block;
        vertical-align: middle;
        margin-right: 8px;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .button-loading {
        pointer-events: none;
    }

    .countdown-container {
        text-align: center;
        font-family: Arial, sans-serif;
        font-size: 28px;
    }

    .time {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
    }

    .time-unit {
        margin: 0 5px;
        padding: 10px;
        border-radius: 5px;
    }

    .timeMode {
        font-size: 14px;
    }

    .modal-body {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .container {
        flex: 1;
        /* Makes the container take all available space */
    }

    .bottom-button-wrapper {
        margin-top: auto;
        /* Pushes the button to the bottom */
    }

    .fade-in {
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
    }

    .fade-in.show {
        opacity: 1;
    }

    .otp-inputs {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin: 20px 0;
    }

    .otp-input {
        width: 40px;
        height: 40px;
        text-align: center;
        font-size: 18px;
    }

    .otp-inputs input[type="number"] {
        -webkit-appearance: none;
        /* Chrome, Safari, Edge */
        -moz-appearance: textfield;
        /* Firefox */
        /* appearance: none; Standard */
        margin: 0;
        border: 1px solid #000;
    }

    .otp-inputs input[type="number"]::-webkit-inner-spin-button,
    .otp-inputs input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        /* Chrome, Safari, Edge */
        margin: 0;
    }

    .custom-field {
        position: relative;
        /* margin-top: 5px; */
        margin-bottom: 20px;
        width: 100%;
        /* Ensure it takes full width */
    }

    .custom-field input,
    .custom-field select {
        border: 1px solid #acacaf;
        padding: 10px;
        padding-left: 20px;
        /* Adjust as needed */
        border-radius: 4px;
        background: transparent;
        font-size: 16px;
        outline: none;
        box-sizing: border-box;
        /* Include padding in the element's total width and height */
        width: 100%;
        /* Ensure the input takes full width */
    }

    .custom-field input::placeholder,
    .custom-field select::placeholder {
        color: transparent;
        /* Hide default placeholder */
    }

    .custom-field .placeholderfiled {
        position: absolute;
        top: 12px;
        /* Initial position */
        left: 20px;
        /* Initial position */
        font-size: 14px;
        color: #acacaf;
        transition: all 0.3s ease;
        pointer-events: none;
        /* Prevent label from blocking input interaction */
    }

    .custom-field input:focus+.placeholderfiled,
    .custom-field input:not(:placeholder-shown)+.placeholderfiled {
        top: -10px;
        left: 10px;
        font-size: 12px;
        color: #222;
        background: #fff;
    }

    .custom-field select:focus+.placeholderfiled,
    .custom-field select:not(:placeholder-shown)+.placeholderfiled {
        top: -10px;
        left: 10px;
        font-size: 12px;
        color: #222;
        background: #fff;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .custom-field input {
            font-size: 14px;
            /* Smaller font size for smaller screens */
        }

        .custom-field .placeholderfiled {
            font-size: 14px;
            /* Adjust size accordingly */
        }

        .custom-field input:focus+.placeholderfiled,
        .custom-field input:not(:placeholder-shown)+.placeholderfiled {
            font-size: 10px;
            /* Adjust size accordingly */
        }
    }

    @media (max-width: 480px) {
        .custom-field input {
            font-size: 12px;
            /* Even smaller font size for very small screens */
        }

        .custom-field .placeholder {
            font-size: 12px;
            /* Adjust size accordingly */
        }

        .custom-field input:focus+.placeholder,
        .custom-field input:not(:placeholder-shown)+.placeholder {
            font-size: 8px;
            /* Adjust size accordingly */
        }
    }

    @media (max-width: 991px) {
        .sptb-1 {
            padding-top: 1.5rem !important;
            padding-bottom: 1.5rem;
            text-align: center;
        }

        .display-5 {
            font-size: 25px;
            margin-bottom: 20px;
            text-align: center;
        }

        .mobile-center {
            justify-content: center;
        }

        .section-title h2 {
            font-size: 1.2rem !important;
        }

        .fs-18 {
            font-size: 14px !important;
            margin-top: 14px !important;
        }

        .button-signin {
            width: 100% !important;
        }

        .overview {
            padding: 15px;
        }

        section {
            width: 90%;
            margin: auto;
            background-color: #fff;
            margin-top: 20px !important;
            padding: 15px !important;
        }

        .overview {
            margin-top: 20px;

        }

        .section-title {
            padding-bottom: 0 !important;
        }

        .overview .py-2 {
            padding: 0 !important;
        }

        .what-you-learn {
            background-color: #fff;
            margin-top: 20px;
            padding: 15px;
        }

        .accordion-button {
            font-size: 13px;
            font-weight: 600;
        }

        .accordion-item {
            margin-bottom: 15px;
        }

        .accordion-item:not(:first-of-type) {
            border-top: 1px solid rgba(0, 0, 0, 0.125);
        }

        .meet-trainer {
            margin-top: 20px;
            padding: 15px;
        }

        .meet-trainer .video-section,
        .recognized .video-section,
        .reviews .video-section {
            margin-top: 10px;
        }

        .meet-trainer .section-title {
            padding-bottom: 0 !important;
        }

        .meet-trainer .py-2 {
            padding: 0 !important;
        }

        .meet-trainer .fs-18 {
            margin-bottom: 0 !important;
        }

        .timing .video-section {
            margin-top: 0 !important;
        }

        .timing .btn {
            width: 100% !important;
        }

        .reviews .card {
            margin-bottom: 0;
        }

        .fs-16 {
            font-size: 12px !important;
        }

        .bottom-button-wrapper {
            position: inherit !important;
            width: 100% !important;
            margin-top: 15px;
        }

        #phoneNumber {
            height: 40px !important;
        }

        #step_3 {
            margin-top: 0 !important;
        }
    }
</style>