<div class="row mt-2">
    <div class="col-lg-12">
        <div class="card cardXX d-flex position-relative flex-column cardBg pr3">
            <div class="row mt-0 mb-0 ml-2 mr-2">
                <!-- Left Section -->
                <div class="col-lg-4 pr2">
                    <h5 class="div-head" >
                        <b style="font-weight:500">Overall</b>
                    </h5>
                    <div class="left-section">
                        <div class="card cardXX d-flex position-relative flex-column cardBg mt-2">
                            <h5 class="div-head" >
                                <b style="font-weight:500">Gender</b>
                            </h5>
                            <div class="gender_img_container d-flex mt-2">
                                <div class="gender_item" data-name = "gender_male_profiling_chart" onclick="clickableSlice(this, 'gender_male_profiling_chart','gender','Male','img','fresh');">
                                    <img src="assets/images/male.png" class="gender_img" alt="">
                                    <div class="gender_value male_value" id="male_value">40%</div>
                                </div>
                                <div class="gender_item" data-name = "gender_female_profiling_chart" onclick="clickableSlice(this, 'gender_female_profiling_chart','gender','Female','img','fresh');">
                                    <img src="assets/images/female.png" class="gender_img" alt="">
                                    <div class="gender_value female_value" id="female_value">40%</div>
                                </div>
                            </div>
                        </div>
                        <div class="card cardXX d-flex position-relative flex-column cardBg mt-2">
                            <h5 class="div-head" >
                                <b style="font-weight:500">Age</b>
                            </h5>
                            <div id="age_op" class="animate__animated animate__fadeInLeft tab2_chart" style="height:300px" data-name="age_profiling_chart"></div>
                        </div>
                        <div class="card cardXX d-flex position-relative flex-column cardBg mt-2">
                            <h5 class="div-head" ><b style="font-weight:500">Income</b></h5>
                            <div id="income_op" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px" data-name="income_profiling_chart"></div>
                        </div>
                        
                    </div>
                </div>
                <!-- Right Section -->
                <div class="col-lg-8 pr5">
                    <h5 class="div-head" >
                        <b style="font-weight:500">Airport</b>
                    </h5>
                    <div class="right-section">
                        <div class="card cardXX d-flex position-relative flex-column cardBg mt-2">
                            <h5 class="div-head" ><b style="font-weight:500">Gender</b></h5>
                            <div id="gender_ap" class="animate__animated animate__fadeInLeft tab2_chart" style="height:200px"></div>
                        </div>
                        <div class="card cardXX d-flex position-relative flex-column cardBg mt-2">
                            <h5 class="div-head" ><b style="font-weight:500">Age</b></h5>
                            <div id="age_ap" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
                        </div>
                        <div class="card cardXX d-flex position-relative flex-column cardBg mt-2">
                            <h5 class="div-head" ><b style="font-weight:500">Income</b></h5>
                            <div id="income_ap" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="card cardXX d-none position-relative flex-column cardBg mt-2">
                            <h5 class="div-head" ><b style="font-weight:500">Segment</b></h5>
                            <div id="segment_op" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
                        </div>
                        <div class="card cardXX d-none position-relative flex-column cardBg mt-2">
                            <h5 class="div-head" ><b style="font-weight:500">Types</b></h5>
                            <div id="type_op" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
                        </div>
                        <div class="card cardXX d-none position-relative flex-column cardBg mt-2">
                            <h5 class="div-head" ><b style="font-weight:500">Dwell Time Departure</b></h5>
                            <div id="dwell_opD" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
                        </div>
                        <div class="card cardXX d-none position-relative flex-column cardBg mt-2">
                            <h5 class="div-head" ><b style="font-weight:500">Dwell Time Arrival</b></h5>
                            <div id="dwell_opA" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
                        </div>
                        <div class="card cardXX d-none position-relative flex-column cardBg mt-2">
                            <h5 class="div-head" ><b style="font-weight:500">Frequency International</b></h5>
                            <div id="frequency_opI" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
                        </div>
                        <div class="card cardXX d-none position-relative flex-column cardBg mt-2">
                            <h5 class="div-head" ><b style="font-weight:500">Frequency Domestic</b></h5>
                            <div id="frequency_opD" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
                        </div>
                        <div class="card cardXX d-none position-relative flex-column cardBg mt-2">
                            <h5 class="div-head" ><b style="font-weight:500">Travelling</b></h5>
                            <div id="travelling_op" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
                        </div>
                        <div class="card cardXX d-none position-relative flex-column cardBg mt-2">
                            <h5 class="div-head" ><b style="font-weight:500">Reason of Travel</b></h5>
                            <div id="purpose_op" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
                        </div>
                        <div class="card cardXX d-none position-relative flex-column cardBg mt-2">
                            <h5 class="div-head" ><b style="font-weight:500">Terminal</b></h5>
                            <div id="terminal_op" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
                        </div>
                        <div class="card cardXX d-none position-relative flex-column cardBg mt-2">
                            <h5 class="div-head" ><b style="font-weight:500">Traveller</b></h5>
                            <div id="traveller_op" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
                        </div>


<div class="card cardXX d-none position-relative flex-column cardBg mt-2">
    <h5 class="div-head" ><b style="font-weight:500">Segment</b></h5>
    <div id="segment_ap" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
</div>
<div class="card cardXX d-none position-relative flex-column cardBg mt-2">
    <h5 class="div-head" ><b style="font-weight:500">Types</b></h5>
    <div id="type_ap" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
</div>
<div class="card cardXX d-none position-relative flex-column cardBg mt-2">
    <h5 class="div-head" ><b style="font-weight:500">Dwell Time Departure</b></h5>
    <div id="dwell_apD" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
</div>
<div class="card cardXX d-none position-relative flex-column cardBg mt-2">
    <h5 class="div-head" ><b style="font-weight:500">Dwell Time Arrival</b></h5>
    <div id="dwell_apA" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
</div>
<div class="card cardXX d-none position-relative flex-column cardBg mt-2">
    <h5 class="div-head" ><b style="font-weight:500">Frequency International</b></h5>
    <div id="frequency_apI" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
</div>
<div class="card cardXX d-none position-relative flex-column cardBg mt-2">
    <h5 class="div-head" ><b style="font-weight:500">Frequency Domestic</b></h5>
    <div id="frequency_apD" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
</div>
<div class="card cardXX d-none position-relative flex-column cardBg mt-2">
    <h5 class="div-head" ><b style="font-weight:500">Travelling</b></h5>
    <div id="travelling_ap" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
</div>
<div class="card cardXX d-none position-relative flex-column cardBg mt-2">
    <h5 class="div-head" ><b style="font-weight:500">Reason of Travel</b></h5>
    <div id="purpose_ap" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
</div>
<div class="card cardXX d-none position-relative flex-column cardBg mt-2">
    <h5 class="div-head" ><b style="font-weight:500">Terminal</b></h5>
    <div id="terminal_ap" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
</div>
<div class="card cardXX d-none position-relative flex-column cardBg mt-2">
    <h5 class="div-head" ><b style="font-weight:500">Traveller</b></h5>
    <div id="traveller_ap" class="animate__animated animate__fadeInLeft tab2_chart" style="height:270px"></div>
</div>





