:root {
        --main-custom-h2-color: #FF4700;
        --main-custom-primary-border-color: #FF4700;
        --main-custom-primary-border-color-hover: #02142A;
        --main-custom-primary-btn-bg-color: #FF4700;
        --main-custom-primary-btn-bg-color-hover: #02142A;
        --main-custom-box-shadow: 0 4px 8px rgba(125, 25, 0, 0.5);
        --main-custom-swiper-pagination-bullet-active: #FF4700;
        --main-custom-swiper-cube-shadow-before: #601500;
    }

    /* global css for landing page */

    /* fontsize for heading text */

    .display-4-custom {
        font-size: 2.5rem;
        font-weight: 700;
        line-height: 1.25;
    }

    /* fontsize for sub-heading text */

    .display-5-custom {
        font-size: 2.5rem;
        font-weight: 700;
        line-height: 1.25;
    }

    /* fontsize for paragraph text */
    .p-fontsize-lead {
        font-size: 1rem;
        font-weight: 300;
    }

    /* 3. LEFT GRADIENT OVERLAY */
    .gradient-overlay-left {
        position: absolute;
        top: 0;
        left: 0;
        width: 20%;
        /* Control the width of the blend area */
        height: 100%;
        z-index: 2;
        /* Place gradient above the background */

        /* Gradient: Opaque white on the left, fading to transparent on the right */
        background: linear-gradient(to right,
                white 0%,
                rgba(255, 255, 255, 0) 100%);
    }

    /* 4. RIGHT GRADIENT OVERLAY */
    .gradient-overlay-right {
        position: absolute;
        top: 0;
        right: 0;
        width: 20%;
        /* Must match the left side width */
        height: 100%;
        z-index: 2;
        /* Place gradient above the background */

        /* Gradient: Transparent on the left, fading to opaque white on the right */
        background: linear-gradient(to left,
                white 0%,
                rgba(255, 255, 255, 0) 100%);
    }

    /* end of global css for landing page */

    /* css for header hamburger */

    /* ========================================================= */
    /* 1. Hamburger Toggler Styling (No change needed here) */
    /* ========================================================= */
    .navbar-toggler {
        /* Removes the default Bootstrap focus outline (border/shadow) on click/focus */
        border: none;
        outline: none !important;
        box-shadow: none !important;
    }

    .navbar-toggler:focus,
    .navbar-toggler:active {
        /* Ensure no visual change on active state or focus */
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    .navbar-toggler .fas.fa-bars {
        /* Changes the color of the Font Awesome hamburger icon to white */
        color: white;
    }

    /* ========================================================= */
    /* 2. Mobile Menu Gradient Background Fix */
    /* ========================================================= */

    /* TARGET THE MAIN OFFCANVAS CONTAINER BY ITS ID */
    #offcanvasNavbarRight {
        /* * NEW: Radial Gradient for a bottom-right crescent/corner fade.
     * - 'farthest-corner at 0% 0%' centers the solid color at the top-left.
     * - The fade extends diagonally to the bottom-right corner.
     * - It uses a transparent color stop (0.0) at the bottom-right to ensure max transparency there.
     */
        background: radial-gradient(farthest-corner at 0% 0%,
                /* Start the solid color at the top-left corner */
                rgba(255, 255, 255, 1.0) 0%,
                rgba(255, 255, 255, 1.0) 45%,
                rgba(255, 255, 255, 0.9) 50%,
                rgba(255, 255, 255, 0.8) 55%,
                rgba(255, 255, 255, 0.7) 60%,
                rgba(255, 255, 255, 0.6) 65%,
                rgba(255, 255, 255, 0.5) 70%,
                rgba(255, 255, 255, 0.4) 75%,
                rgba(255, 255, 255, 0.3) 80%,
                rgba(255, 255, 255, 0.2) 85%,
                rgba(255, 255, 255, 0.1) 90%,
                rgba(255, 255, 255, 0.0) 95%) !important;
    }

    /* Ensure the internal components are transparent so the gradient shows */
    #offcanvasNavbarRight .offcanvas-header,
    #offcanvasNavbarRight .offcanvas-body {
        background-color: transparent !important;
    }

    /* Ensure the offcanvas header and body backgrounds are transparent so the main gradient shows through */
    #offcanvasNavbarRight .offcanvas-header,
    #offcanvasNavbarRight .offcanvas-body {
        background-color: transparent !important;
    }

    /* Adjust Offcanvas Title/Close button color if needed, as the background is now lighter */
    #offcanvasNavbarRight .offcanvas-title {
        color: #FF4700;
        /* Dark color for readability */
    }

    .offcanvas .btn-close {
        /* 1. Target Color: #FF4700 (a shade of orange/red)
      2. URL Encoded: %23FF4700
    */
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FF4700'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    }

    #offcanvasNavbarRight .btn-close {
        filter: invert(0);
        /* Ensure the close button is dark/visible */
    }

    /* ========================================================= */
    /* 3. Ensure Menu Links are Readable */
    /* ========================================================= */

    #offcanvasNavbarRight .navbar-nav .nav-link {
        color: #333;
        /* Dark link color for contrast on the light gradient background */
    }

    /* end of css for header hamburger */

    /* hero section */

    .text-padding-custom {
        /*padding-right: 200px;*/
        text-align: justify;
    }

    .custom-shadow {
        /*box-shadow: 0 4px 8px rgba(255, 71, 0, 0.5);*/
        box-shadow: var(--main-custom-box-shadow);
    }

    .heading-text-custom {
        color: var(--main-custom-h2-color);
    }

    .main-custom-hero-section-button {
        border-color: var(--main-custom-primary-border-color);
        background-color: var(--main-custom-primary-btn-bg-color);

        transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;

    }

    .main-custom-hero-section-button:hover {
        border-color: var(--main-custom-primary-border-color-hover);
        background-color: var(--main-custom-primary-btn-bg-color-hover);

        transform: scale(1.03);
        box-shadow: var(--main-custom-box-shadow)
    }

    .main-custom-hero-section-button:after {
        transform: scale(1);
        box-shadow: none;

    }

    .hero-slide-custom {
        height: 500px;
        object-fit: cover;
    }

    /* end of hero section */



    /* Rolling Text Animation */

    .rolling-text-container {
        display: inline-block;
        height: 1.2em;
        /* Ensure this matches your font size */
        overflow: hidden;
        vertical-align: middle;
    }

    #animated-word {
        display: flex;
        /* Use flexbox for horizontal alignment */
        height: 100%;
        overflow: hidden;
    }

    .letter {
        display: inline-block;
        transform: translateY(100%);
        /* Start position below view */
        opacity: 0;
        transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.5s ease-in;
    }

    .letter.roll-in {
        transform: translateY(0);
        /* Final position */
        opacity: 1;
    }

    /* Swiping Image Animation */
    #animated-image {
        transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .swipe-in {
        transform: translateX(0);
    }

    .swipe-out {
        transform: translateX(100%);
    }

    /* end of Rolling Text Animation */

    /* applicable to all pagination dots unless overridden */
    .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 10px);
    }



    /* swiper CSS */

    #swiper-title {
        color: #FF4700;
    }

    /* .swiper {
        width: 75%;
        height: 300px;
    } */

    .swiper1 {
        width: 75%;
        /* height: 300px; */

        height: max-content;

    }

    .swiper-1-text {
        width: 100%;
        /* height: max-content; */
        height: 250px;
    }

    .swiper-slide {
        background-position: center;
        background-size: cover;
    }

    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        /* height: 125px; */
        object-fit: cover;
    }

    /* @media screen and (max-width: 996px) {
        .swiper-slide img {
            height: 115px;
        }

    }
    @media screen and (max-width: 768px) {
        .swiper-slide img {
            height: 100px;
        }

    } */

    .swiper-pagination.swiper-pagination-1 {
        position: relative;
        /* width: 3%;
        bottom: 200px; */
        width: 100%;
        bottom: -25px;
    }

    /* this is the default css class of the swiper plugin */
    .swiper-pagination-bullet {
        /* width: 12px;
        height: 12px; */
        width: 7px;
        height: 7px;
    }

    .swiper-pagination-bullet-active {
        /* width: 12px;
        height: 12px; */
        width: 7px;
        height: 7px;
        background-color: var(--main-custom-swiper-pagination-bullet-active);
    }

    .swiper-cube .swiper-cube-shadow:before {
        background-color: var(--main-custom-swiper-cube-shadow-before);
    }

    /* end of swiper CSS */

    /* section 3 video css */

    .video-container {
        position: relative;
        width: 100%;
        padding-bottom: 50%;
        /*56.25%; for 16:9 ratio*/
        /* 16:9 Aspect Ratio */
        height: auto;
        overflow: hidden;
    }

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        background-color: rgba(0, 0, 0, 0);
        /* Transparent */
    }

    /* end of section 3 video css*/

    /* section 3.5 vendor qr section css */

    .custom-vendor-logo-section {
        height: 50px;
    }

    .custom-vendor-logo {
        width: 50%;
        height: 75px;
        object-fit: contain;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1rem;
    }

    /* end of section 3.5 vendor qr section css */


    /* section 4 video css*/

    .display-5-custom {
        font-size: 2rem;
        font-weight: 500;
        line-height: 1;
    }

    /* Update the main swiper container height */
    .swiper2 {
        width: 100%;
        /* height: 450px; */
        height: max-content;
        padding-bottom: 30px;
    }

    /* Update swiper2 slides and add new content container */
    .swiper2 .swiper-slide {
        width: 300px;
        height: 425px;
        /* Fixed height to accommodate both image and text */
        margin-left: 15px;
        margin-right: 15px;

    }

    .swiper2 .swiper-slide img {
        height: 300px;
        /* Fixed height for the image */
        width: 100%;
        object-fit: cover;
    }

    /* Style the new container to hold the image and text */
    .swiper2 .swiper-slide .slide-content {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .card-info {
        padding: 10px;
        background-color: #fff;
        color: #000;
        text-align: center;
    }

    /* builtin plugin css */
    .swiper-3d .swiper-slide-shadow-left {
        background-image: linear-gradient(to left, rgba(125, 25, 0, 0.25), rgba(255, 0, 0, 0));
    }

    .swiper-3d .swiper-slide-shadow-right {
        background-image: linear-gradient(to left, rgba(255, 0, 0, 0), rgba(125, 25, 0, 0.25));
    }

    .swiper-pagination.swiper-pagination-2 {
        position: relative;
        /* top: -45px; */
        /* rotate: 90deg; */
        /* margin-bottom: -100px; */
    }

    /* .swiper-pagination-bullets.swiper-pagination-horizontal.swiper-pagination-bullets-2 {
        left: 48.5%;
    } */

    /* end of section 4 video css*/



    /* map section */

    /* ---------------------------------- */
    /* Map and Details Panel Base Styles */
    /* ---------------------------------- */
    #map-div {
        width: 100%;
        height: 500px;
        /* Default height for large screens */
    }

    #map-div.amcharts-chart-div>svg>g[role="contentinfo"] {
        display: none !important;
    }

    g[aria-labelledby="id-79-title"] {
        display: none !important;
    }

    #details-panel {
        background-color: #ffffff;
        padding: 20px;
        border-radius: 8px;
        min-height: 500px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    #details-panel h2,
    #details-panel p {
        text-align: center;
    }

    /* ---------------------------------- */
    /* Metrics Grid Styles (Default: 3 Columns) */
    /* ---------------------------------- */
    #metrics-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* CHANGED to 3 columns */
        gap: 15px;
        /* Reduced gap slightly for 3 columns */
        margin-top: 30px;
        width: 100%;
        max-width: 600px;
        /* Increased max-width to accommodate 3 columns better */
        margin-left: auto;
        margin-right: auto;
    }

    .metric-item {
        padding: 10px;
        /* Reduced padding for compact look */
        border-radius: 8px;
        background-color: #f7f7f7;
        text-align: center;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .metric-icon {
        font-size: 20px;
        /* Reduced icon size slightly */
        color: #FF4700;
        margin-bottom: 3px;
    }

    .metric-value {
        font-size: 20px;
        /* Reduced font size slightly */
        font-weight: bold;
        color: #333;
        display: block;
        line-height: 1.1;
    }

    .metric-subtitle {
        font-size: 12px;
        /* Reduced font size for better fit */
        color: #666;
        margin-top: 5px;
        line-height: 1.1;
    }



    /* end of map */

    /* section 3 services section */

    .swiper3 {
        width: 100%;
        height: max-content;
    }

    .swiper3 .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
    }

    .swiper3 .carousel-item {
        display: flex;
        align-items: center;
        gap: 30px;
        background: #ffffff;
        padding: 30px 40px;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        /* min-width: 300px; */
        /* max-width: 450px; */
        margin: 0 auto;
        /* Center the item in the slide */
    }

    .swiper3 .icon-circle3 {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }

    .swiper3 .red-circle3 {
        background-color: #e31837;
    }

    .swiper3 .yellow-circle3 {
        background-color: #fecb2f;
    }

    .swiper3 .blue-circle3 {
        background-color: #1a73e8;
        /* Example color for additional slide */
    }

    .swiper3 .icon-image3 {
        max-width: 90%;
        max-height: 90%;
        height: auto;

        border-radius: 50%;
        object-fit: cover;

    }

    /* Swiper Navigation and Pagination styles */
    .swiper3 .swiper-button-next,
    .swiper3 .swiper-button-prev {
        color: #333;
        top: 90px;
    }

    /* .swiper3 .swiper-button-next {
        right: 0;
    }

    .swiper3 .swiper-button-prev {
        left: 0;
    } */

    .swiper-3 .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 3rem;
    }

    .swiper-pagination.swiper-pagination-3 {
        position: relative;
        bottom: -5px;
        /* top: -45px;
        rotate: 90deg;
        margin-bottom: -100px; */
    }

    /* .swiper-pagination-bullets.swiper-pagination-horizontal.swiper-pagination-bullets-3 {
        left: 48.5%;
    } */

    /* .normal-font-custom {
        font-size: 0.85rem;
    } */

    /* end of section 3 services section */

    /* how it works section */
    .label-custom {
        color: #ffffff;
        background-color: #FF4700;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        border-radius: 10px;
    }

    /* end of how it works section*/

    /* css for testimonial section i.e swiper 4 */

    .swiper4 {
        width: 100%;
        height: max-content;
        /*background: #000;*/
    }

    .swiper4 .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 3rem;
    }


    .swiper4 .swiper-slide {
        font-size: 18px;
        color: #000000;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 40px 60px;
    }

    .parallax-bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 130%;
        height: 100%;
        -webkit-background-size: cover;
        background-size: cover;
        background-position: center;
    }

    /* 1. PARENT CONTAINER (CRITICAL) */
    /* The parent must be position: relative for the children to be absolutely positioned correctly. */
    .testimonial-container {
        position: relative;
        /* Set the height and width as needed for your section */
        /* width: 100%; */
        /* height: 300px; */
        overflow: hidden;
        /* Ensures overlays don't bleed outside */
    }

    /* 2. PATTERN BACKGROUND (Your existing class, simplified) */
    .testimonial-bg {
        /* Set the original pattern image */
        background-image: url(../../assets/frontend/img/landing-page/testemonials/background.jpg);

        /* Control Transparency */
        background-color: rgba(0, 0, 0, 0.5);

        /* Repeat and Shrink */
        background-repeat: repeat;
        background-size: 100px 100px;

        /* Ensure content is positioned above the overlays if they are absolute */
        position: relative;
        z-index: 1;
        /* Keep content above the z-index: 2 gradients if needed */
        padding: 20px;
        /* Example padding for content */
    }

    .swiper-pagination.swiper-pagination-4 {
        position: relative;
        /* top: -65px;
        rotate: 90deg;
        margin-bottom: -50px; */
    }

    /* .swiper-pagination-bullets.swiper-pagination-horizontal.swiper-pagination-bullets-4 {
        left: 48.5%;
    } */

    .swiper4 .icon-circle4 {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .swiper4 .red-circle4 {
        background-color: #e31837;
    }

    .swiper4 .yellow-circle4 {
        background-color: #fecb2f;
    }

    .swiper4 .blue-circle4 {
        background-color: #1a73e8;
    }

    .swiper4 .icon-image4 {
        max-width: 90%;
        max-height: 90%;
        height: auto;

        border-radius: 50%;
        object-fit: cover;

    }

    /* Swiper Navigation and Pagination styles */
    .swiper4 .swiper-button-next,
    .swiper4 .swiper-button-prev {
        color: #333;
        top: 215px;
    }

    .swiper4 .icon-svg4 {
        font-size: 2rem;
        margin-bottom: 0.5rem;
        color: #FF4700;
    }

    .small-font-custom {
        font-size: 0.75rem;
    }

    /* end of css for testimonial section i.e swiper 4 */

    /* css for social feed i.e swiper 5 */

    .swiper5 {
        width: 100%;
        height: 500px;
        /* height: max-content; */
        max-width: 500px;
        margin: 0 auto;
    }

    .swiper5 .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 18px;
        font-size: 22px;
        font-weight: bold;
        color: #fff;
    }

    .swiper5 .swiper-slide:nth-child(1n) {
        background-color: rgb(206, 17, 17);
    }

    .swiper5 .swiper-slide:nth-child(2n) {
        background-color: rgb(0, 140, 255);
    }

    .swiper5 .swiper-slide:nth-child(3n) {
        background-color: rgb(10, 184, 111);
    }

    .swiper5 .swiper-slide:nth-child(4n) {
        background-color: rgb(211, 122, 7);
    }

    .swiper5 .swiper-slide:nth-child(5n) {
        background-color: rgb(118, 163, 12);
    }

    .swiper5 .swiper-slide:nth-child(6n) {
        background-color: rgb(180, 10, 47);
    }

    .swiper5 .swiper-slide:nth-child(7n) {
        background-color: rgb(35, 99, 19);
    }

    .swiper5 .swiper-slide:nth-child(8n) {
        background-color: rgb(0, 68, 255);
    }

    .swiper5 .swiper-slide:nth-child(9n) {
        background-color: rgb(218, 12, 218);
    }

    .swiper5 .swiper-slide:nth-child(10n) {
        background-color: rgb(54, 94, 77);
    }

    /* Add styling for the new pagination dots */
    .swiper-pagination-5 .swiper-pagination-bullet {
        background: #FF4700;
        /* Use your primary color */
    }

    .swiper-pagination.swiper-pagination-5 {
        position: relative;
        bottom: -5px;
        /* top: -75px;
        rotate: 90deg;
        margin-bottom: -150px; */
    }

    /* .swiper-pagination-bullets.swiper-pagination-horizontal.swiper-pagination-bullets-5 {
        left: 48.5%;
    } */

    /* end of css for social feed i.e swiper 5 */

    /* css for contact form section */

    .inquiry-section-bg {
        /* Combine the linear-gradient and the image URL in one property */
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
            url('../../assets/frontend/img/landing-page/contact-form/background.jpg');
        background-size: cover;
        background-position: center;
    }

    /* Ensure text elements inside the section are above the overlay */
    .inquiry-content {
        position: relative;
        z-index: 2;
    }

    /* css for contact form section */


    /* css for mobile devices */

    @media (max-width: 991.98px) {

        /* swiper CSS */

        .swiper1 {
            width: 100%;
            /* height: 300px; */

            height: max-content;

        }

        .swiper-1-text {
            width: 100%;
            /* height: max-content; */
            height: max-content;
        }

        /* .swiper-pagination.swiper-pagination-1 {
            position: relative;
            width: 100%;
            bottom: -25px;
        } */

        /* end of swiper CSS */

        /* section 3 */
        .swiper3 .swiper-button-next:after,
        .swiper-button-prev:after {
            font-size: 2.0rem;
        }

        /* end of section 3 */

        /* section 4 */
        .swiper4 .swiper-button-next:after,
        .swiper-button-prev:after {
            font-size: 2.0rem;
        }

        /* end of section 4 */

        /* section 5 */
        .swiper5 {
            height: 250px;
            max-width: 300px;
        }

        /* end of section 5 */
    }

    @media (max-width: 767.98px) {

        /* global css for landing page */

        /* 3. LEFT GRADIENT OVERLAY */
        .gradient-overlay-left {
            width: 15%;
        }

        /* 4. RIGHT GRADIENT OVERLAY */
        .gradient-overlay-right {
            width: 15%;
        }

        /* end of global css for landing page */

        .hero-slide-custom {
            height: 250px;
            width: 100%;
            object-fit: cover;
        }

        /* swiper CSS */

        /* .swiper {
            width: 90%;
            height: 300px;
        } */

        /* this is the default css class of the swiper plugin hence why single property is added here */
        /* .swiper-pagination-bullets.swiper-pagination-horizontal.swiper-pagination-bullets-1 {
            left: 48.5%;
        } */

        /* end of swiper CSS */

        /* map section */

        /* Adjust Map Height */
        #map-div {
            height: 350px;
            /* Reduced map height for mobile */
        }

        /* Ensure details panel is not excessively tall */
        #details-panel {
            min-height: auto;
        }

        /* Metrics Grid for Mobile: Back to a single column to prevent horizontal scrolling */
        #metrics-grid {
            grid-template-columns: 1fr;
            /* One column on mobile */
            gap: 10px;
            max-width: 100%;
        }

        .metric-item {
            padding: 15px;
            text-align: left;
            /* Align text left for single column readability */
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .metric-icon {
            font-size: 24px;
            margin-bottom: 0;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .metric-details {
            display: flex;
            flex-direction: column;
        }

        .metric-value {
            font-size: 22px;
            text-align: right;
            order: 2;
            /* Put value on the right */
        }

        .metric-subtitle {
            font-size: 14px;
            margin-top: 0;
            text-align: right;
            order: 1;
            /* Put subtitle on top of value (or just next to it) */
        }

        /* end of map section */

        /* section-3 clients section */

        .small-font-custom {
            font-size: 14px;
        }

        /* end of section-3 clients section */

        /* section 4 */
        .swiper4 .swiper-button-next:after,
        .swiper-button-prev:after {
            font-size: 1.5rem;
        }

        /* section 3 */
        .swiper3 .swiper-button-next:after,
        .swiper-button-prev:after {
            font-size: 1.5rem;
        }

        /* end of section 3 */

        /* end of section 4 */

        /* section 5 */
        .swiper5 {
            height: 300px;
            max-width: 300px;
        }

        /* end of section 5 */

    }

    /* end of css for mobile devices */

    /* Tax Table Center Alignment Styles */
    .tax-table-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .tax-table-centered {
        margin: 0 auto;
    }

    .tax-table-centered thead th,
    .tax-table-centered tbody td {
        text-align: center;
        vertical-align: middle;
    }

    .tax-table-word-wrap td {
        overflow-wrap: anywhere;
        word-wrap: break-word;
    }

    .tax-table-centered ul.action {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .tax-table-centered ul.action li {
        display: inline-block;
        margin: 0;
        padding: 0;
    }

    /* Toggle Status Button Styles - Prevent text wrapping */
    .toggle-status-btn {
        white-space: nowrap;
        min-width: 80px;
    }