@extends('frontend.layouts.master')
@section('main-section')
<div class="rts-bread-crumbarea-1 rts-section-gap bg_image" style="background-image: url({{url('/frontend/assets/img/about-banner.jpg');}})">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="breadcrumb-main-wrapper">
                    <h1 class="title">Kids Package</h1>                    
                    <div class="pagination-wrapper">
                        <a href="{{url('/')}}">Course</a>
                        <i class="fa-regular fa-chevron-right"></i>
                        <a class="active" href="#">Kids Package</a>
                    </div>                    
                </div>
            </div>
        </div>
    </div>
</div>

<div class="rts-course-details-area rts-section-gap">
    <div class="container">
        <div class="row g-5">
            <div class="col-xl-8 col-lg-12">
                
                <div class="single-course-style-five">
                    <h2 class="title">Kids Package</h2>                                       
                    <div class="course-details-btn-wrapper full-width pb--50">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Course Information</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link " id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Course Content</button>
                            </li>                            
                        </ul>
                    </div>
                    <div class="tab-content mt--50" id="myTabContent">
                        <div class="tab-pane fade  show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                            <div class="course-content-wrapper">
                                <h5 class="title mb--10">About Course</h5>
                                <p class="disc">
                                    Welcome to Kids Package, where young minds embark on an exciting journey into the world of computer programming! We are passionate about inspiring and empowering the next generation of digital innovators by providing fun and engaging coding classes for kids. Our mission is to foster creativity, critical thinking, and problem-solving skills through hands-on learning experiences in a supportive and interactive environment.
                                </p>
                                <h5 class="title mb--10">Description</h5>
                                <p class="disc">
                                    This  is an exciting computer course designed specifically for kids to learn the basics of computer programming through fun and interactive activities. Our course introduces children to the fascinating world of coding, where they will learn fundamental concepts and principles while building their own games, animations, and interactive stories.
                                </p>
                                                              
                            </div>
                        </div>

                        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                            <div class="module-wrapper">
                                <h6 class="title mb--10">What Will You Learn?</h6>
                                <div class="inner-content">
                                    <div class="single-wrapper">
                                        <div class="single-codule">                                            
                                            <p class="tt-basic">
                                                <i class="fa-regular fa-check"></i>
                                                Windows
                                            </p>
                                        </div>
                                        
                                        <div class="single-codule">                                            
                                            <p class="tt-basic">
                                                <i class="fa-regular fa-check"></i>
                                                MS Word
                                            </p>
                                        </div>

                                        <div class="single-codule">                                            
                                            <p class="tt-basic">
                                                <i class="fa-regular fa-check"></i>
                                                MS Powerpoint
                                            </p>
                                        </div>

                                        <div class="single-codule">                                            
                                            <p class="tt-basic">
                                                <i class="fa-regular fa-check"></i>
                                                Coding
                                            </p>
                                        </div>

                                        <div class="single-codule">                                            
                                            <p class="tt-basic">
                                                <i class="fa-regular fa-check"></i>
                                                Internet
                                            </p>
                                        </div>
                                                                                                                                                                
                                    </div>
                                </div>
                            </div>
                        </div>                        
                    </div>                  
                </div>                
            </div>

            <div class=" col-xl-4 col-lg-12 pl--50 pl_lg--15 pl_md--15 pl_sm--15 rts-sticky-column-item">
               <div class="course-enquiry-form contact-page-form">
                    <div class="row mb-5">
                        <div class="col-md-12">
                            <h3 class="text-center mb-0">
                                Quick Enquiry
                            </h3>
                            <p class="text-center">
                                Enquiry Today To Get Best Offer and Deals.
                            </p>
                        </div>
                    </div>
                    <form action="#" method="POST">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">                                  
                                  <input type="text" name="name" id="name" class="form-control" placeholder="Name" required />
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="form-group">                                  
                                  <input type="email" name="email" id="email" class="form-control" placeholder="Email" required />
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="form-group">                                  
                                  <input type="number" name="phone" id="phone" class="form-control" placeholder="Phone No" required />
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="form-group">                                  
                                  <input type="text" name="course" id="course" class="form-control" placeholder="Course Name" required />
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="form-group">                                  
                                  <input type="text" name="city" id="city" class="form-control" placeholder="City" required />
                                </div>
                            </div>

                            <div class="col-md-12">
                                <button class="btn btn-sm btn-danger btn-block enquiry-form-button">Submit</button>
                            </div>

                        </div>
                    </form>
               </div>
            </div>
        </div>
    </div>
</div>
@endsection