<div class="cover-image bg-background" data-bs-image-src="<?php echo base_url() ?>uploads/banner1.jpg" style="background: url(&quot;<?php echo base_url() ?>uploads/banner1.jpg&quot;) center center;">
    <div class="sptb-1">
        <div class="header-text1 mb-0" id="regForm">
            <div class="container">
                <div class="row">
                    <div class="col-xl-4 col-lg-4 col-md-12">
                        <div>
                            <p class=" lead text-white"> <?php echo $mainData->ibast_sub_heading; ?></p>
                            <h1 class=" display-5 font-weight-semibold text-white"><?php echo $mainData->ibast_heading; ?></h1>
                            <div class="text-center-2">
                                <a href="javascript:void(0)" class="btn-secondary btn btn-lg" style="border-radius: 0;background-color: #BE1502!important;border-color: #BE1502!important;color:#fff"><?php echo $mainData->ibast_sub_heading_2; ?></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-12">
                        <div>
                            <img src="<?php echo base_url(); ?><?php echo $mainData->ibast_image; ?>">
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-12">
                        <div class="card d-lg-block d-none">
                            <div class="card-body">
                                <div class="mt-4 text-center p-3">
                                    <div>
                                        <h3>Register now for FREE</h3>
                                        <div class="mt-5">
                                            <div class="input-container">
                                                <input class="form-control" placeholder="Enter Mobile No." type="number">
                                            </div>
                                            <div class="mt-5">
                                                <button class="btn text-white" style="width: 100%;">Register Now</button>
                                            </div>
                                            <div class="mt-5">
                                                <p>Already Registered? <a href="#"> Log in</a></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .input-container {
        position: relative;
        display: inline-block;
    }

    .input-container::before {
        content: '+91';
        position: absolute;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
        color: #000;
    }

    .input-container input {
        padding-left: 45px;
    }

    .item-all-card .iteam-all-icon {
        display: flex;
        justify-content: center;
    }

    .item-all-card .item-all-text {
        text-align: center;
    }

    .item-all-card {
        border: 1px solid #be1502;
        border-radius: 30px;
        height: 300px;
    }

    .about-2:hover {
        background-color: #fff !important;
    }
</style>
<?php $section_data_1 = json_decode($mainData->ibast_section_1_data, true);
if ($section_data_1) : ?>
    <section class="sptb bg-light">
        <div class="container">
            <div class="section-title d-md-flex">
                <div>
                    <h2><?php echo $mainData->ibast_section_1_title; ?></h2>
                </div>
                <div class="ms-auto d-inline-flex">
                    <div class="w-150 mt-3 me-4">
                    </div>
                </div>
            </div>
            <div class="row">
                <?php foreach ($section_data_1 as $key => $data_1) : ?>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="item-all-card text-dark item-hover-card p-6">
                            <a href="#" class="absolute-link"></a>
                            <div class="iteam-all-icon">
                                <i class="fa <?php echo $data_1['icon']; ?>"></i>
                            </div>
                            <div class="item-all-text mt-3">
                                <h5 class="mb-0"><?php echo $data_1['title']; ?></h5>
                                <p class="mt-3">
                                <p><?php echo $data_1['description']; ?></p>
                                <p><b>Duration:&nbsp;</b><?php echo $data_1['duration']; ?> Days</p>
                                </p>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>
<?php endif; ?>
<?php $section_data_2 = json_decode($mainData->ibast_section_2_data, true);
if ($section_data_2) : ?>
    <section class="sptb">
        <div class="container">
            <div class="section-title d-md-flex">
                <div>
                    <h2><?php echo $mainData->ibast_section_2_title; ?></h2>
                </div>
                <div class="ms-auto d-inline-flex">
                    <div class="w-150 mt-3 me-4">
                    </div>
                </div>
            </div>
            <div class="row">
                <?php foreach ($section_data_2 as $key => $data_2) : ?>
                    <div class="col-lg-4 col-md-6 col-sm-6">
                        <div class="mb-lg-0 mb-4 box-shadow about-2 p-5">
                            <h3 class="text-center"><?php echo $data_2['title']; ?></h3>
                            <h6 class="mt-4 text-center"><i class="fa fa-clock-o"></i>&nbsp;Duration: <?php echo $data_2['duration']; ?> min</h6>
                            <div class="bg-light mt-5 p-4" style="border-radius: 10px;">
                                <h6>Section</h6>
                                <?php $allSubject = explode(',', $data_2['subject']);
                                foreach ($allSubject as $key => $subject) : ?>
                                    <h4 class="mt-3"><?php echo $subject; ?></h4>
                                <?php endforeach; ?>

                            </div>
                            <div class="mt-4">
                                <a href="#regForm" class="btn text-white fs-16 w-100">Register For Free</a>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>

            </div>
        </div>
    </section>
<?php endif; ?>
<section class="sptb bg-light">
    <div class="container">
        <div class="section-title d-md-flex">
            <div>
                <h2>How to Register</h2>
            </div>
            <div class="ms-auto d-inline-flex">
                <div class="w-150 mt-3 me-4">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="css-1my0288">
                    <div class="css-ei2k8d">
                        <div class="css-mvn8ou"></div>
                        <div class="css-1dpmnui">
                            <div class="css-svt489">1</div>
                        </div>
                        <div class="borderBottom css-wujgql">
                            <div class="css-0"><img src="https://prod-at-elsa.byjusweb.com/_next/static/media/mobilePhone.1b385f08.svg" alt="mobile-verification" width="100%" height="100%" loading="lazy" class="css-1xh7uw4"></div>
                            <div class="css-42w1pj">Verify your mobile number with <b>OTP</b></div>
                        </div>
                    </div>
                    <div class="css-10qhf82">
                        <div class="css-s08hmm">
                            <div class="css-mwlibq"><img src="https://prod-at-elsa.byjusweb.com/_next/static/media/rightArrow.eca44ee2.svg" class="css-0"></div>
                        </div>
                    </div>
                    <div class="css-ei2k8d">
                        <div class="css-mvn8ou"></div>
                        <div class="css-1dpmnui">
                            <div class="css-svt489">2</div>
                        </div>
                        <div class="borderBottom css-wujgql">
                            <div class="css-0"><img src="https://prod-at-elsa.byjusweb.com/_next/static/media/details.4f8b086f.svg" alt="submit-details" width="100%" height="100%" loading="lazy" class="css-1xh7uw4"></div>
                            <div class="css-42w1pj">Enter your <b>details</b> and Submit</div>
                        </div>
                    </div>
                    <div class="css-10qhf82">
                        <div class="css-s08hmm">
                            <div class="css-mwlibq"><img src="https://prod-at-elsa.byjusweb.com/_next/static/media/rightArrow.eca44ee2.svg" class="css-0"></div>
                        </div>
                    </div>
                    <div class="css-ei2k8d">
                        <div class="css-1dpmnui">
                            <div class="css-svt489">3</div>
                        </div>
                        <div class=" css-wujgql">
                            <div class="css-0"><img src="https://prod-at-elsa.byjusweb.com/_next/static/media/success.b9340a34.svg" alt="success-registration" width="100%" height="100%" loading="lazy" class="css-1xh7uw4"></div>
                            <div class="css-42w1pj">You have now successfully <b>registered</b> for i-BAST</div>
                        </div>
                    </div>
                    <div class="css-10qhf82"></div>
                </div>
            </div>
            <div class="text-center">
                <a href="#regForm" class="btn text-white fs-16" style="width: 300px;">Register For Free</a>
            </div>
        </div>
    </div>
</section>
<?php
$section_data_3 = json_decode($mainData->ibast_section_faq_data, true);
if ($section_data_3) : ?>
    <section class="sptb">
        <div class="container">
            <div class="section-title d-md-flex">
                <div>
                    <h2><?php echo $mainData->ibast_section_faq_title; ?></h2>
                </div>
                <div class="ms-auto d-inline-flex">
                    <div class="w-150 mt-3 me-4">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="accordion" id="accordionExample">
                        <?php foreach ($section_data_3 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>
<?php endif; ?>
<style>
    .accordion-button:not(.collapsed) {
        color: #fff;
        background-color: #be1502;
        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
    }

    .accordion-button {
        background-color: #be1502;
        color: #fff;
    }

    .css-1my0288 {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1rem;
        -moz-box-pack: center;
        justify-content: center;
        display: flex;
        position: relative;
        text-align: center;
    }

    .css-ei2k8d {
        border-radius: 1rem;
        display: flex;
        -moz-box-pack: center;
        justify-content: center;
        -moz-box-align: center;
        align-items: center;
        position: relative;
    }

    @media (min-width: 992px) {
        .css-ei2k8d {
            margin-bottom: 3rem;
        }
    }

    .css-wujgql {
        display: flex;
        -moz-box-pack: center;
        justify-content: center;
        -moz-box-align: center;
        align-items: center;
    }

    .css-42w1pj {
        margin-left: 1.125rem;
        font-family: "Poppins", sans-serif;
        font-style: normal;
        font-weight: normal;
        font-size: 1rem;
        line-height: 1.5rem;
        color: rgb(68, 68, 68);
        width: 12.5rem;
        text-align: left;
    }

    @media (min-width: 767.98px) {
        .css-10qhf82 {
            position: relative;
        }
    }

    @media (min-width: 767.98px) {
        .css-10qhf82:not(:last-child)::before {
            content: "";
            display: inline-block;
            border-top: 0.1rem dotted rgb(92, 128, 255);
            width: 11.875rem;
            margin-right: 2rem;
            transform: translateY(1.5rem);
            left: -92px;
            right: 0px;
        }
    }

    @media (min-width: 1200px) and (max-width: 1399px) {
        .css-10qhf82::before {
            width: 5rem !important;
        }
    }

    .css-s08hmm {
        padding: 0.25rem;
        left: 4.875rem;
        /* background: rgb(255, 255, 255); */
        display: block;
        position: absolute;
    }

    @media (min-width: 1200px) and (max-width: 1399px) {
        .css-s08hmm {
            left: 1.5rem;
        }
    }

    .css-mwlibq {
        background: rgb(217, 205, 255);
        display: flex;
        -moz-box-align: center;
        align-items: center;
        -moz-box-pack: center;
        justify-content: center;
        padding: 0.3rem;
        border-radius: 50%;
    }

    .css-1dpmnui {
        display: none;
    }
</style>