<?php error_reporting(0); ?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div id="content">
    <div id="banner">
        <div class="mainSection">
            <div class="sptb pb-5">
                <div class="header-text1 mb-0">
                    <div class="container">
                        <div class="row">
                            <div class="col-xl-8 col-lg-7 col-md-12">
                                <div>
                                    <h4 class="display-7 font-weight-semibold text-white mb-5 main-sub-heading"><?php echo $course->course_sub_heading; ?></h4>
                                    <h1 class="display-5 font-weight-semibold text-white"><?php echo $course->course_heading; ?></h1>
                                    <div class="d-lg-flex align-items-center mb-4 mt-4 d-none d-lg-block">

                                        <span class="text-warning heading-icon-title">
                                            <div class="text-center">
                                                <div class="fs-14 mb-2 main-short-icon"><img src="<?php echo base_url(); ?>assets/slider/5-Star Reviews.png"></div>
                                                <div class="fs-10"><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i></div>
                                                <div class=" fs-14">5-Star Reviews</div>
                                            </div>
                                        </span>
                                        <span class="text-warning heading-icon-title ms-5">
                                            <div class="text-center">
                                                <div class="fs-14 mb-2 main-short-icon"><img src="<?php echo base_url(); ?>assets/slider/9200+ Students.png"></div>
                                                <div class="fs-14">9200+</div>
                                                <div class=" fs-14">Students</div>
                                            </div>
                                        </span>
                                        <span class="text-warning heading-icon-title ms-5">
                                            <div class="text-center">
                                                <div class="fs-14 mb-2 main-short-icon"><img src="<?php echo base_url(); ?>assets/slider/Last Updated August 2024.png"></div>
                                                <div class="fs-14">Last Updated</div>
                                                <div class=" fs-14"><?php echo date('F', strtotime($course->course_update_date)) ?> <?php echo date('Y', strtotime($course->course_update_date)) ?></div>
                                            </div>
                                        </span>

                                    </div>
                                    <div class="d-none d-lg-block">
                                        <p class=" lead text-white"><?php echo $course->course_sub_heading_2; ?></p>
                                        <div class="row d-flex justify-content-center mt-5">
                                            <div class="col-sm-8 d-flex justify-content-between">
                                                <div class="header-curriculum d-inline-block w-half">
                                                    <button data-bs-toggle="modal" data-bs-target="#browchureModel" class="btn-secondary btn btn-lg w-full"><i class="fa fa-download"></i> Brochure</button>
                                                </div>
                                                <div class="header-book-seat d-inline-block w-half ms-4">
                                                    <a href="#submit_form" class="btn-primary btn btn-lg w-full text-white"><i class="fa fa-calendar"></i> Book Your Seat</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-5 col-md-12">
                                <div class="card">
                                    <div class="card-body p-1">
                                        <div class="course-slider">
                                            <ul class="list-unstyled video-list-thumbs">
                                                <li class="mb-0">
                                                    <a class="class-video p-0 text-center">
                                                        <img loading="lazy" src="<?php echo base_url(); ?><?php echo $course->course_image; ?>" alt="" class="img-responsive  border br-7">
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>

                                    </div>
                                </div>
                                <div class="d-lg-none">
                                    <p class=" lead text-white"> <?php echo $course->course_sub_heading_2; ?></p>
                                    <div class="row d-flex justify-content-center mt-5">
                                        <div class="col-sm-8 d-flex justify-content-between">
                                            <div class="header-curriculum d-inline-block w-half">
                                                <button data-bs-toggle="modal" data-bs-target="#browchureModel" class="btn-secondary btn btn-lg w-full"><i class="fa fa-download"></i> Brochure</button>
                                            </div>
                                            <div class="header-book-seat d-inline-block w-half ms-4">
                                                <a class="btn-primary btn btn-lg w-full text-white" href="#submit_form"><i class="fa fa-calendar"></i> Book Your Seat</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-data digital-marketing-specialization-v2 not_signed_up">
            <div class="item">
                <div class="icon time "></div>
                <div class="content-data">
                    <div class="title">Online</div>
                    <div class="caption"><?php echo $course->course_duration; ?> months
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="icon batch "></div>
                <div class="content-data">
                    <div class="title">Admission closes on</div>
                    <div class="caption"><?php echo date('jS M, Y', strtotime($course->course_admission_date)); ?>
                        <span class="tag limited-seats">Limited seats</span>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="icon fees "></div>
                <div class="content-data">
                    <div class="title">Course fee</div>
                    <div class="caption">
                        <div class="amount">
                            <div class="slab">₹<?php echo number_format($course->course_in_class_dicount_price); ?></div>
                            <div class="base"><?php echo number_format($course->course_online_main_price); ?></div>
                            <div class="saved">Save ₹<?php echo number_format($course->course_online_main_price - $course->course_in_class_dicount_price); ?>/-</div>
                        </div>
                    </div>
                    <span class="tag valid-till">Valid for today</span>
                </div>
            </div>
            <div class="item last">
                <div class="icon guarantee "></div>
                <div class="content-data">
                    <div class="title">Guarantee</div>
                    <div class="caption not-hired">100% refund if not hired*</div>
                </div>
            </div>
            <div class="item application-status">
                <div class="vertical-break not_signed_up"></div>
                <div class="cta-container">
                    <button class="btn btn-primary regular application-stage" data-toggle="modal" data-target="#signup_modal">Book Your Seat</button>
                    <div class="enrolled_users">
                        <i class="ic-16-trend"></i>
                        <p><span>181,893</span> already applied</p>
                    </div>
                </div>
            </div>
        </div>
        <?php
        $headingData = json_decode($course->course_theme_heading, true);
        foreach ($headingData as $key => $heading) {
            include VIEWPATH . 'front/course_components/' . $key . '.php';
        }
        ?>
    </div>
</div>

<div id="stickyBar" class="ps-widget mb30 overflow-hidden default-box-shadow1 bdrs12 bdr1 p-2" style="background: rgb(243, 244, 246) !important;">
    <div class="row">
        <div class="col-sm-2">
            <div class=" menu-bar">
                <img src="<?php echo base_url() ?><?php echo $app_setting->header_logo ?>">
            </div>
        </div>
        <div class="col-sm-10">
            <div class="d-flex overflow-x-auto scroll-smooth scroll-container">
                <div class="py-2 px-3 menu-bar active">
                    <a href="#key_ighlights">Key Highlights</a>
                </div>
                <div class="py-2 px-3 menu-bar">
                    <a href="#who_this_for"> Who's This For </a>
                </div>
                <div class="py-2 px-3 menu-bar">
                    <a href="#curriculum">Program Curriculum</a>
                </div>
                <div class="py-2 px-3 menu-bar">
                    <a href="#certifications">Certifications</a>
                </div>
                <div class="py-2 px-3 menu-bar">
                    <a href="#mar_tool">Marketing Tools</a>
                </div>
                <div class="py-2 px-3 menu-bar">
                    <a href="#ai_tool">AI Tools</a>
                </div>
                <div class="py-2 px-3 menu-bar">
                    <a href="#hiring">Hiring</a>
                </div>
                <div class="py-2 px-3 menu-bar">
                    <a href="#methodology">Learning Methodology</a>
                </div>
                <div class="py-2 px-3 menu-bar">
                    <a href="#stories">Placement</a>
                </div>
                <div class="py-2 px-3 menu-bar">
                    <a href="#mentees">Success Stories</a>
                </div>
                <div class="py-2 px-3 menu-bar">
                    <a href="#what_you_lern"> How it Works </a>
                </div>
                <div class="py-2 px-3 menu-bar">
                    <a href="#update"> What's New </a>
                </div>
                <div class="py-2 px-3 menu-bar">
                    <a href="#included"> What's Included </a>
                </div>
                <div class="py-2 px-3 menu-bar">
                    <a href="#bonus">Bonus Content</a>
                </div>
                <div class="py-2 px-3 menu-bar">
                    <a href="#fees">Fees</a>
                </div>
                <div class="py-2 px-3 menu-bar">
                    <a href="#faq">FAQs</a>
                </div>
            </div>
        </div>
    </div>
</div>
<section class="footer_sticky pb-3 d-lg-none" id="sticky-bar">
    <div class="container ">
        <div class="row d-flex justify-content-center mt-5">
            <div class="col-sm-8 d-flex justify-content-between">
                <div class="header-curriculum d-inline-block w-half">
                    <button data-bs-toggle="modal" data-bs-target="#browchureModel" class="btn-secondary btn btn-lg w-full"><i class="fa fa-download"></i> Brochure</button>
                </div>
                <div class="header-book-seat d-inline-block w-half ms-4">
                    <a class="btn-primary btn btn-lg w-full text-white" href="#main_form"><i class="fa fa-calendar"></i> Book Your Seat</a>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="modal fade" id="browchureModel" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" style="padding: 40px;">
                <h3 class="modal_heading">Please enter your Details to get the Course Brochure</h3>
                <form id="download_bowchure" method="post">
                    <div class="mb-3">
                        <label class="col-form-label">Your Full Name <span class="text-danger">*</span></label>
                        <input type="text" id="name" class="form-control form-field" required placeholder="Enter Your Full Name" name="lead_name">
                    </div>
                    <div class="mb-3">
                        <label class="col-form-label">Your Email ID <span class="text-danger">*</span></label>
                        <input type="email" id="email" class="form-control form-field" required placeholder="Enter Your Email ID" name="lead_email">
                    </div>
                    <div class="mb-4">
                        <label class="col-form-label">Your Mobile No. <span class="text-danger">*</span></label>
                        <input type="text" id="phone" class="form-control form-field" required placeholder="Enter Your Mobile No." name="lead_mobile">
                    </div>
                    <!-- Occupation Field -->
                    <div class="mb-3">
                        <label class="col-form-label">Occupation <span class="text-danger">*</span></label>
                        <select id="occupation" class="form-control form-field" name="lead_occupation" required>
                            <option value="" disabled selected>Select Your Occupation</option>
                            <option value="Student">Student</option>
                            <option value="Working Professional">Working Professional</option>
                            <option value="House Wife">House Wife</option>
                            <option value="Business Owner">Business Owner</option>
                        </select>
                    </div>

                    <!-- Education Field -->
                    <div class="mb-3">
                        <label class="col-form-label">Education <span class="text-danger">*</span></label>
                        <select id="education" class="form-control form-field" name="lead_education" required>
                            <option value="" disabled selected>Select Your Education</option>
                            <option value="Below 10th">Below 10th</option>
                            <option value="Below 12th">Below 12th</option>
                            <option value="12th Pass">12th Pass</option>
                            <option value="BA">BA</option>
                            <option value="BCA">BCA</option>
                            <option value="B.com">B.com</option>
                            <option value="BAF">BAF</option>
                            <option value="BMS">BMS</option>
                            <option value="BBA">BBA</option>
                            <option value="MBA">MBA</option>
                            <option value="M.com">M.com</option>
                            <option value="Mass communication">Mass communication</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>

                    <div class="mb-4">
                        <div id="recaptcha-container"></div>
                    </div>

                    <input type="hidden" class="form-control" required name="lead_course" id="leadCourse">
                    <input type="hidden" class="form-control" value="Download Brochure" required name="lead_mode">

                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="tac_updates" name="tac_updates" checked>
                        <label class="form-check-label" for="tac_updates">I have read and agree to the <a href="<?php echo base_url(); ?>p/privacy-policy"><u>Privacy Policy</u></a> and <a href="<?php echo base_url(); ?>p/terms-conditions"><u>Terms & Conditions.</u></a></label>
                    </div>

                    <!-- WhatsApp Updates Checkbox -->
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="whatsapp_updates" name="whatsapp_updates" checked>
                        <label class="form-check-label" for="whatsapp_updates">Send me updates on WhatsApp</label>
                    </div>

                    <input type="hidden" class="form-control" value="<?php echo $course->course_id ?>" required placeholder="Enter Your Mobile No." name="lead_course">
                    <input type="hidden" class="form-control" value="Download Brochure" required placeholder="Enter Your Mobile No." name="lead_mode">

                    <div class="mt-5">
                        <button disabled id="sendOtpButton" type="button" class="btn w-full text-white" style="font-size: 15px;font-weight: 700;">
                            <span class="loginButtonText">Submit Now</span>
                            <span class="loginButtonLoaderMain">Process....</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="otpModel" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="d-flex justify-content-center align-items-center container">
                    <div class="py-3 px-3" style="margin-top: -60px;">
                        <h5 class="m-0">Mobile phone verification</h5>
                        <span class="mobile-text">Enter the code we just send on your mobile phone
                            <b class="text-danger" id="otp_mobile">+91 86684833</b>
                        </span>
                        <div class="otp-inputs">
                            <div class="d-flex flex-row ">
                                <input type="text" class="form-control otp-input" maxlength="1" autofocus="">
                                <input type="text" class="form-control otp-input" maxlength="1">
                                <input type="text" class="form-control otp-input" maxlength="1">
                                <input type="text" class="form-control otp-input" maxlength="1">
                                <input type="text" class="form-control otp-input" maxlength="1">
                                <input type="text" class="form-control otp-input" maxlength="1">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        var confirmationResult;
        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"
        };

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

        function validateForm() {
            var phone = $('#phone').val().trim();
            var name = $('#name').val().trim();
            var email = $('#email').val().trim();

            var nameValid = name.split(' ').length > 1;
            var phoneValid = /^\d{10}$/.test(phone);
            var emailValid = validateEmail(email);

            if (phoneValid && nameValid && emailValid) {
                $('#sendOtpButton').prop('disabled', false);
                $('.loginButtonText').text('Send Verification Code');
            } else {
                $('#sendOtpButton').prop('disabled', true);
                $('.loginButtonText').text('Submit Now');
            }
        }

        function validateEmail(email) {
            return email.match(
                /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
            );
        }

        document.getElementById('sendOtpButton').addEventListener('click', function() {
            $('.loginButtonLoaderMain').show();
            $('.loginButtonText').hide();
            $('#sendOtpButton').prop('disabled', true);

            var phoneNumber = $('#phone').val();
            firebase.initializeApp(firebaseConfig);

            // Initialize reCAPTCHA verifier
            var appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
                size: 'invisible',
                callback: function(response) {
                    // reCAPTCHA solved
                },
                'expired-callback': function() {
                    $('.loginButtonLoaderMain').hide();
                    $('.loginButtonText').show();
                    $('#sendOtpButton').prop('disabled', false);
                }
            });

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

            firebase.auth().signInWithPhoneNumber('+91' + phoneNumber, appVerifier)
                .then(function(result) {
                    confirmationResult = result; // Set the global confirmationResult
                    $('#otp_mobile').html(phoneNumber);
                    $('#browchureModel').modal('hide');
                    $('#otpModel').modal('show');
                    swal({
                        title: "Done!",
                        text: "OTP Send To Your Mobile No.",
                        icon: "success",
                    });
                })
                .catch(function(error) {
                    console.error('Error during signInWithPhoneNumber', error);
                    $('.loginButtonLoaderMain').hide();
                    $('.loginButtonText').show();
                    $('#sendOtpButton').prop('disabled', false);
                    swal({
                        title: "Oops!",
                        text: "OTP Sending Failed. Please try Again.",
                        icon: "error",
                    });
                });
        });

        // Function to validate OTP
        function validateOTP() {
            var otp = '';
            $('.otp-input').each(function() {
                otp += $(this).val();
            });

            if (otp.length === 6) {
                if (!confirmationResult) {
                    swal({
                        title: "Oops!",
                        text: "OTP verification is not initialized. Please try again.",
                        icon: "error",
                    });
                    return;
                }

                $("#ajax-preloader").show();
                confirmationResult.confirm(otp).then(function(result) {
                    var user = result.user;
                    $('#otpMessage').html(''); // Clear any existing message
                    $.ajax({
                        beforeSend: function() {
                            $("#ajax-preloader").show();
                        },
                        url: '<?php echo base_url(); ?>/home/submit_lead',
                        method: 'POST',
                        data: $('form#download_bowchure').serialize(),
                        success: function(response) {
                            if (response) {
                                swal({
                                    title: "Wow!",
                                    text: "Brochure Download Successfully",
                                    icon: "success",
                                });
                                window.open('<?php echo base_url(); ?><?php echo $course->course_pdf_browser; ?>', '_blank');
                                setTimeout(
                                    function() {
                                        location.reload();
                                    }, 1000);
                            } else {
                                swal({
                                    title: "Oops!",
                                    text: "Please Try Again ",
                                    icon: "error",
                                });
                            }
                            $("#ajax-preloader").hide();
                        },
                        error: function(xhr, status, error) {
                            console.error('Error:', error);
                            $("#ajax-preloader").hide();
                        }
                    });
                }).catch(function(error) {
                    $("#ajax-preloader").hide();
                    console.error('Error during confirmationResult.confirm', error);
                    swal({
                        title: "Oops!",
                        text: "Invalid OTP. Please Enter Correct OTP",
                        icon: "error",
                    });
                });
            }
        }

        // Handle OTP input focus and backspace
        $('.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');
            }
        });
    });

    $(document).ready(function() {
        var $stickyBar = $('#sticky-bar');
        var $keyHighlights = $('#get_certified');
        var keyHighlightsOffset = $keyHighlights.offset().top;

        $(window).scroll(function() {
            if ($(window).scrollTop() > keyHighlightsOffset) {
                $stickyBar.fadeIn();
                $('#sticky-wrapper').hide();
            } else {
                $stickyBar.fadeOut();
                $('#sticky-wrapper').show();
            }
        });
    });

    $(document).ready(function() {
        var $stickyBar = $('#stickyBar');
        var $keyHighlights = $('#get_certified');
        var keyHighlightsOffset = $keyHighlights.offset().top;

        $(window).scroll(function() {
            if ($(window).scrollTop() > keyHighlightsOffset) {
                $stickyBar.fadeIn();
            } else {
                $stickyBar.fadeOut();
            }
        });
    });

    $(document).ready(function() {
        var $stickyBar = $('#stickyBar');
        var $sections = $('.scroll-container a');
        var offsets = [];

        $sections.each(function() {
            var sectionId = $(this).attr('href');
            var $section = $(sectionId);

            if ($section.length) { // Check if the section exists
                offsets.push({
                    id: sectionId,
                    offset: $section.offset().top
                });
            } else {
                console.warn('Section not found for:', sectionId);
            }
        });

        $(window).scroll(function() {
            var scrollTop = $(window).scrollTop();

            for (var i = 0; i < offsets.length; i++) {
                if (scrollTop >= offsets[i].offset - 10 && (i == offsets.length - 1 || scrollTop < offsets[i + 1].offset - 10)) {
                    $('.menu-bar').removeClass('active');
                    $(`a[href="${offsets[i].id}"]`).closest('.menu-bar').addClass('active');
                }
            }
        });
    });
</script>

<style>
    .video-icon:hover i {
        background-color: var(--theme-color-1) !important;
        color: #fff;
    }

    .main-short-icon img {
        width: 30px;
    }

    #key_ighlights .feature h3 {
        font-size: 30px;
        font-weight: 900 !important;
        color: var(--theme-color-3);
    }

    #key_ighlights .feature p {
        font-size: 17px;
        font-weight: 700;
    }

    .menu-bar.active {
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 10px;
    }

    .menu-bar {
        margin-bottom: 10px;
    }

    #stickyBar {
        position: fixed;
        top: 0;
        z-index: 999;
        width: 100%;
        display: none;
        box-shadow: 2px 3px 4.7px .3px rgba(92, 89, 143, 0.2);
    }

    .footer_sticky {
        position: fixed;
        bottom: 0;
        z-index: 999;
        width: 100%;
        display: none;
        background: #fff;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }

    .bdrs12 {
        border-radius: 12px;
    }

    .bdr1 {
        border: 1px solid #DDDDDD;
    }

    .overflow-x-auto {
        overflow-x: auto !important;
        white-space: nowrap;
        scrollbar-width: thin;
    }

    .scroll-smooth {
        scroll-behavior: smooth !important;
    }

    .details2 .wideget-user-tab.wideget-user-tab3 .tabs-menu1 ul li a {
        background: #fff !important;
    }

    .wideget-user-tab .tab-menu-heading {
        border-radius: 50px;
    }

    .details2 .wideget-user-tab.wideget-user-tab3 .tabs-menu1 ul li .active {
        border-radius: 50px;
    }

    .wideget-user-tab {
        display: grid;
        justify-content: center;
    }

    .course_details_nav {
        padding: 30px;
    }

    .course-details {
        padding: 25px;
    }

    .EMI-partners {
        display: flex;
        gap: 15px;
        justify-content: center;
        padding: 15px 0;
    }

    .course-details .tabs-menu1 ul li,
    .profile-1 .tabs-menu1 ul li {
        width: inherit;
        text-align: center;
    }

    .price-sec-price {
        border-left: 1px solid #000;
        padding-left: 20px;
    }

    .price-content {
        background-color: #fff;
        height: 100%;
        /* Adjusted to fit content */
        padding: 30px;
        display: grid;
        align-items: center;
        justify-content: center;
    }

    .price-content-first {
        background-color: #fff;
        height: 100%;
        /* Adjusted to fit content */
        padding: 30px;
        /* display: grid;
        align-items: center;
        justify-content: center; */
    }

    .price-content-first .main-head-tab {
        text-align: center;
        display: inline-flex !important;
    }

    /* The container */
    .container-checkbox {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 20px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Hide the browser's default checkbox */
    .container-checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    /* Create a custom checkbox */
    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        /* background-color: #eee; */
        border: 1px solid #000;
    }

    /* On mouse-over, add a grey background color */
    .container-checkbox:hover input~.checkmark {
        background-color: #ccc;
    }

    /* When the checkbox is checked, add a blue background */
    .container-checkbox input:checked~.checkmark {
        background-color: #2196F3;
    }

    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Show the checkmark when checked */
    .container-checkbox input:checked~.checkmark:after {
        display: block;
    }

    /* Style the checkmark/indicator */
    .container-checkbox .checkmark:after {
        left: 9px;
        top: 7px;
        width: 7px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .pricing-section li {
        background-color: #fff;
        font-size: 18px;
        border-radius: 6px;
        padding: 20px 15px 15px 15px;
        margin-bottom: 23px;
        text-align: left;
    }

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

    .sst .team-section .team-img img {
        box-shadow: 0 0 0 1px #dce3ec, 0 8px 16px 0 #dce3ec;
        display: inline;
        height: 150px;
        width: auto;
    }

    .company-img img {
        display: inline !important;
        height: 40px;
        width: auto;
    }

    .learning-step {
        background: var(--theme-color-1);
        width: 40px;
        height: 40px;
        text-align: center;
        padding: 9px;
        border-radius: 50px;
        margin: -42px auto 10px auto;
        color: #fff;
        font-weight: 600;
    }

    .et_pb_text_inner {
        position: relative;
        border-radius: 3px;
        box-shadow: 0 2px 6px 0 rgb(0 0 0 / 20%);
        background-color: #ffff;
        padding: 20px 5px 0;
    }

    .hire-partner .image-border {
        background-color: #fff;
        border: 1px solid #ddd;
        padding: 5px;
        margin-bottom: 20px;
        text-align: center;
    }

    .ai-power-tool .image-border {
        border: 1px solid #ddd;
        padding: 5px;
        margin-bottom: 20px;
    }

    .marketing-tool .image-border {
        border: 1px solid #ddd;
        padding: 5px;
        margin-bottom: 20px;
    }

    .marketing-tool .col-sm-2 col-6 {
        margin-bottom: 20px;
    }

    .color-change {
        color: var(--theme-color-3);
    }

    .accordion-flush .accordion-item .accordion-button {
        border-radius: 0;
        border: 1px solid #ddd;
    }

    .accordion-button:not(.collapsed),
    .accordion-button:focus {
        outline: none;
        border-color: transparent;
        box-shadow: none;
        background-color: transparent;
    }

    .accordion-button::after {
        content: "\f078";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        left: 1rem;
        /* top: 50%; */
        transform: translateY(-50%);
        font-size: 1rem;
        transition: transform 0.3s ease;
        background-image: none !important;
        background-color: #fff;
        color: red;
    }

    .accordion-button.collapsed::after {
        content: "\f078";
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        /* Font Awesome chevron up icon */
    }

    .ac-lecture li {
        margin: 0 !important;
    }

    .ac-lecture li a {
        padding: 10px 15px;
        color: #000;
    }

    .ac-lecture li a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 7px 10px;
        border-radius: 5px;
    }

    .ac-lecture li a span {
        font-size: 15px;
    }

    .ellipsis-line-2 {
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }

    .ac-lecture li a span i {
        font-size: 19px;
    }

    .ac-lecture li a span i {
        color: var(--theme-color-1);
        font-size: 15px;
        margin-right: 14px;
    }

    .ac-lecture li a .lecture-info {
        font-size: 13px;
    }

    .fe-check {
        color: #fff;
    }

    .sec-4-highlisht {
        background-color: #fff;
        height: 100%;
        /* Adjusted to fit content */
        padding: 30px;
        /* display: flex; */
        align-items: center;
        justify-content: center;
    }

    .feature-form form button {
        height: 45px;
    }

    .feature-form {
        background-color: #ddd;
        height: 100%;
        /* Adjusted to fit content */
        padding: 10px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .form-main h3 {
        color: #000;
        font-weight: 700;
    }

    .form-filed .form-control {
        height: 45px;
        /* border-radius: 0; */
    }

    .form-filed .form-label {
        color: #000;
    }

    .heading-icon-title {
        font-size: 20px;
    }

    .w-full {
        width: 100%;
    }

    .w-half {
        width: 50%;
    }

    .wideget-user-tab .tabs-menu1 ul li a {
        padding: 5px 10px;
    }

    .wideget-user-tab .tabs-menu1 ul li .active {
        border-bottom: 2px solid #000 !important;
    }

    .main-head-tab ul li a.active {
        color: #000 !important;
    }

    .course-slider img {
        /* height: 200px; */
    }

    .test-placement {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #31354a;
        font-weight: 800;
        font-size: .8rem;
        margin-top: 20px;
    }

    .test-placement img {
        /* width: 70px; */
    }

    .placements_batch {
        background-color: #ddd;
        margin-top: 15px;
        padding: 5px 0px 5px 0px;
    }

    @media only screen and (max-width: 600px) {
        .mainSection {
            background: #102349;
            height: 700px;
        }

        .application-status {
            display: none !important;
        }

        #content #banner .footer-data {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
        }

        #content #banner .footer-data {
            margin-top: -180px;
        }

        #fees {
            padding-bottom: 0 !important;
        }

        .course_details_nav {
            padding: 15px;
        }

        .price-content {
            padding-bottom: 10px;
        }

        .main-sub-heading {
            font-size: 17px;
            text-align: center;
        }

        .course-details .wideget-user-tab.wideget-user-tab3 .tabs-menu1 ul li a {
            padding: 8px !important;
            padding-right: 8px;
            padding-left: 8px;
        }

        .details2 .wideget-user-tab.wideget-user-tab3 .tabs-menu1 ul li .active {
            border-radius: 50px !important;
            padding-left: 20px !important;
            padding-right: 20px !important;
        }

        .course-details {
            padding: 0;
        }

        .sptb {
            padding-top: 20px;
            padding-bottom: 20px;
        }

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

        @media (max-width: 480px) {
            .tabs-menu1 ul li {
                width: inherit !important;
                margin: 2px;
            }
        }

        .heading-icon-title {
            font-size: 15px;
            /* margin-top: 20px; */
        }

        .heading-icon-title .fa {
            font-size: 17px;
        }

        .mainSection p {
            font-size: 16px;
            text-align: center;
        }

        .btn {
            font-size: 14px
        }

        .section-title {
            padding-bottom: 1rem;
            text-align: center;
        }

        .section-title h2 {
            font-size: 22px;
            text-align: center;
        }

        .section-title p {
            font-size: 16px !important;
            text-align: center;
        }

        .lead {
            font-size: 16px;
            font-weight: 300;
        }

        .course-slider img {
            height: auto;
        }

        .col-auto {
            -ms-flex: 0 0 auto;
            flex: 0 0 auto;
            width: inherit;
            max-width: none;
        }

        .sticky-pin {
            box-shadow: inherit;
        }

        .callusbtn {
            display: none;
        }

        .horizontal-header .smllogo {
            display: inline-block;
            margin-top: 9px;
            margin-left: inherit !important;
        }

        #stickyBar {
            position: fixed;
            top: 0;
            z-index: 999;
            width: 100%;
            display: none;
            border: 0;
            box-shadow: 2px 3px 4.7px .3px rgba(92, 89, 143, 0.2);
        }

        .menu-bar {
            text-align: center;
        }

        body .horizontalMenucontainer .header-absolute {
            display: none !important;
        }

        .mobile-padding-bottom {
            margin-bottom: 20px;
        }
    }

    body {
        color: #000;
        font-size: 16px;
    }

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

    .newsletter-new,
    .footer-main {
        display: none;
    }

    .fe-check {
        display: inline-block;
        border-radius: 50%;
        box-shadow: 0 0 2px #888;
        padding: 3px;
        background-color: #000;
        color: #fff;
    }

    .videoModelCloseButton {
        position: absolute;
        right: 0;
    }

    .mobile-text {
        color: #989696b8;
        font-size: 15px;
    }

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

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

    .loginButtonLoaderMain {
        display: none;
    }


    #browchureModel .modal-header,
    #otpModel .modal-header {
        border-bottom: 0;
    }

    #browchureModel .modal-content {
        background-color: #ddd;
    }

    #otpModel .modal-header {
        /* margin-top: -20px;
        text-align: center;
        font-size: 20px;
        margin-right: 30px;
        font-weight: 700; */
    }

    #browchureModel .modal_heading {
        margin-top: -50px;
        text-align: center;
        font-size: 20px;
        margin-right: 30px;
        font-weight: 700;
    }

    #browchureModel .form-control {
        border: 1px solid #ada9a9;
        /* border-radius: 0; */
        height: 45px;
    }

    #browchureModel .modal-content {
        border-radius: 20px;
    }

    .small-cat-img img {
        display: block;
        height: 100px !important;
        object-fit: contain;
    }

    .tabs-menu1 ul li .active {
        background-color: #f5f4f9 !important;
    }

    #content #banner .footer-data .item .caption .amount .base::after {
        content: ' ';
        display: block;
        position: absolute;
        background-color: #8a8a8a;
        top: 10.5px;
        width: 100%;
        height: 1px;
        transform: rotate(172deg);
    }

    #content #banner .footer-data .item .caption .amount .saved {
        font-size: 12px;
        line-height: 16px;
        font-weight: 600;
        color: #13800d;
    }

    #content #banner .footer-data .item .caption .amount .base {
        font-size: 14px;
        line-height: 22px;
        font-weight: 500;
        margin-right: 6px;
        color: #8a8a8a;
        position: relative;
    }

    #content #banner .footer-data .item .caption .amount .slab {
        font-size: 16px;
        line-height: 20px;
        font-weight: 600;
        margin-right: 6px;
    }

    #content #banner .footer-data .item .caption .amount {
        display: flex;
        align-items: center;
    }

    #content #banner .footer-data .item .tag.limited-seats {
        display: block;
        width: -webkit-max-content;
        width: max-content;
    }

    #content #banner .footer-data .item .tag.limited-seats,
    #content #banner .footer-data .item .tag.valid-till {
        /* display: inline; */
        margin-top: 6px;
        color: #945e12;
        background: #fffaeb;
        border: 1px solid #eeb217;
        box-sizing: border-box;
        border-radius: 4px;
        padding: 2px 6px;
        font-size: 12px;
        line-height: 16px;
        font-weight: 500;
        white-space: nowrap;
    }

    #content #banner .footer-data .item .caption {
        font-size: 14px;
        line-height: 22px;
        font-weight: 700;
        margin-top: 4px;
        color: #484848;
        max-width: 208px;
    }

    #content #banner .footer-data .item .icon.time {
        background-position: 0 0;
    }

    #content #banner .footer-data .item .icon.batch {
        background-position: -41px 0;
    }

    #content #banner .footer-data .item .icon.fees {
        background-position: -82px 0;
    }

    #content #banner .footer-data .item .icon.guarantee {
        background-position: -123px 0;
    }

    #content #banner .footer-data .item {
        display: flex;
        width: auto;
    }

    #content #banner .footer-data .item .icon {
        width: 40px;
        height: 40px;
        margin-right: 12px;
        background-image: url(https://training-comp-uploads.internshala.com/jos_common/banner-footer-icons.png?v=1);
        background-repeat: no-repeat;
        background-size: 400px;
        flex-shrink: 0;
    }

    #content #banner .footer-data {
        margin: auto;
        padding: 20px 32px 20px 20px;
        max-width: 1224px;
        min-height: 124px;
        display: flex;
        justify-content: space-between;
        gap: 8px;
        color: #333;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        z-index: 1;
        overflow: clip;
        margin-top: -60px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
        margin-bottom: 30px;
    }

    .mainSection {
        background: #102349;
        /* height: 450px; */
        padding-bottom: 90px;
    }

    #content {
        background-color: #fff;
    }
</style>