.elementor-6235 .elementor-element.elementor-element-793f3b0{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--background-transition:0.3s;}.elementor-6235 .elementor-element.elementor-element-2dade57 img{width:100%;border-radius:15px 15px 15px 15px;}.elementor-6235 .elementor-element.elementor-element-06d64f8 .elementor-menu-toggle{margin:0 auto;}.elementor-6235 .elementor-element.elementor-element-06d64f8 .elementor-nav-menu--main .elementor-item{color:#FFFFFF;fill:#FFFFFF;}.elementor-6235 .elementor-element.elementor-element-862f6eb{--display:flex;--background-transition:0.3s;--border-radius:23px 23px 23px 23px;box-shadow:5px 5px 10px 0px rgba(181.23964755342988, 181.23964755342988, 181.23964755342988, 0.5);}.elementor-6235 .elementor-element.elementor-element-862f6eb:not(.elementor-motion-effects-element-type-background), .elementor-6235 .elementor-element.elementor-element-862f6eb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6235 .elementor-element.elementor-element-862f6eb, .elementor-6235 .elementor-element.elementor-element-862f6eb::before{--border-transition:0.3s;}.elementor-6235 .elementor-element.elementor-element-ecfb8f3{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--background-transition:0.3s;--border-radius:18px 18px 18px 18px;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-6235 .elementor-element.elementor-element-ecfb8f3:not(.elementor-motion-effects-element-type-background), .elementor-6235 .elementor-element.elementor-element-ecfb8f3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#2F416B;}.elementor-6235 .elementor-element.elementor-element-ecfb8f3, .elementor-6235 .elementor-element.elementor-element-ecfb8f3::before{--border-transition:0.3s;}.elementor-6235 .elementor-element.elementor-element-3799e32.elementor-element{--align-self:center;}.elementor-6235 .elementor-element.elementor-element-3799e32 .elementor-button{font-family:"Roboto", Sans-serif;font-size:17px;font-weight:500;}.elementor-6235 .elementor-element.elementor-element-d7e6df3.elementor-element{--align-self:center;}.elementor-6235 .elementor-element.elementor-element-d7e6df3 .elementor-button{font-family:"Roboto", Sans-serif;font-size:16px;font-weight:500;background-color:#1B58A7;}.elementor-6235 .elementor-element.elementor-element-6996f08{--display:flex;--background-transition:0.3s;--border-radius:18px 18px 18px 18px;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-6235 .elementor-element.elementor-element-6996f08:not(.elementor-motion-effects-element-type-background), .elementor-6235 .elementor-element.elementor-element-6996f08 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#444B76;}.elementor-6235 .elementor-element.elementor-element-6996f08, .elementor-6235 .elementor-element.elementor-element-6996f08::before{--border-transition:0.3s;}.elementor-6235 .elementor-element.elementor-element-a1961e6{width:var( --container-widget-width, 99% );max-width:99%;--container-widget-width:99%;--container-widget-flex-grow:0;}.elementor-6235 .elementor-element.elementor-element-a1961e6.elementor-element{--align-self:center;}.elementor-6235 .elementor-element.elementor-element-a1961e6 > .elementor-widget-container{border-style:none;border-radius:0px 0px 0px 0px;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-6235 .elementor-element.elementor-element-995eace{--display:flex;--background-transition:0.3s;}.elementor-6235 .elementor-element.elementor-element-95eae47{--display:flex;--background-transition:0.3s;}.elementor-6235 .elementor-element.elementor-element-64aa5e9 .elementor-button{font-family:"Roboto", Sans-serif;font-size:20px;font-weight:500;background-color:#8C61CE;}.elementor-6235 .elementor-element.elementor-element-1e5b934.elementor-element{--align-self:center;}.elementor-6235 .elementor-element.elementor-element-c469d0a.elementor-element{--align-self:center;}.elementor-6235 .elementor-element.elementor-element-39a8b39.elementor-element{--align-self:center;}body.elementor-page-6235:not(.elementor-motion-effects-element-type-background), body.elementor-page-6235 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#141A3B;}@media(max-width:1024px){.elementor-6235 .elementor-element.elementor-element-ecfb8f3{--grid-auto-flow:row;}}@media(min-width:768px){.elementor-6235 .elementor-element.elementor-element-862f6eb{--width:90%;}}@media(max-width:767px){.elementor-6235 .elementor-element.elementor-element-ecfb8f3{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS */<!-- Toggle Buttons -->
<div class="page-toggle-table">
    <div style="margin-bottom: 20px;">
        <button id="toggleTable1" class="toggle-button">Show Table 1</button>
        <button id="toggleTable2" class="toggle-button">Show Table 2</button>
    </div>

    <!-- wpDataTables -->
    <div id="table1" class="wpdatatable">
        [wpdatatable id=1] <!-- Replace with your first table shortcode -->
    </div>
    <div id="table2" class="wpdatatable" style="display: none;">
        [wpdatatable id=2] <!-- Replace with your second table shortcode -->
    </div>
</div>

<!-- Styles -->
<style>
    .page-toggle-table .wpdatatable {
        display: none;
    }
    .page-toggle-table .toggle-button {
        margin: 10px;
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        border: none;
        cursor: pointer;
        font-size: 16px;
    }
    .page-toggle-table .toggle-button:hover {
        background-color: #0056b3;
    }
</style>

<!-- JavaScript to toggle shortcodes -->
<script>
    // Check if we're on the page with the .page-toggle-table class
    if (document.body.classList.contains('page-toggle-table')) {
        document.getElementById("toggleTable1").onclick = function() {
            document.getElementById("table1").style.display = 'block';
            document.getElementById("table2").style.display = 'none';
        };

        document.getElementById("toggleTable2").onclick = function() {
            document.getElementById("table2").style.display = 'block';
            document.getElementById("table1").style.display = 'none';
        };

        // Optionally set the initial table to be visible
        document.getElementById("table1").style.display = 'block';  // Default table (Table 1)
        document.getElementById("table2").style.display = 'none';   // Hide Table 2 initially
    }
</script>/* End custom CSS */