:root {
    --rz-primary: #342d64; /* Base Purple 342d64 #332B62*/
    --rz-secondary: #5C52A5; /* Light Purple */
    --rz-success: #28a745; /* Success messages */
    --rz-warning: #ffc107; /* Warning messages */
    --rz-danger: #dc3545; /* Danger messages */
    --rz-sidebar-background-color: #221B48; /* Deep Violet */
    --rz-sidebar-color: #ffffff; /* Replace with your desired text color */
    --rz-sidebar-border-inline-end: 1px solid #abcdef; /* Sidebar border color */
    --rz-base-800: #3E3C47; /*  dark grey--RadzenPanelMenuItembackcolor + celltextcolor*/
    --rz-base-900: #221B48; /* deep purple--H1 + selectedMenuItem */
    --rz-on-primary-lighter: #1E1B40; /* card text*/
    --rz-primary-lighter: #D8C3E5; /*soft lilac  card background*/
    /*rz-border-color-primary*/
}

.legal-header {
    font-size: 2rem; /* Default font size for larger screens */
    text-align: left;
    word-wrap: break-word; /* Ensure long words wrap */
    overflow-wrap: anywhere; /* Break long words at any point */
    white-space: normal; /* Allow text to wrap */
    margin: 0 auto; /* Center the header */
    max-width: 90%; /* Limit the width for better readability */
    line-height: 1.2; /* Add spacing between lines */
    display: block; /* Ensure the header behaves as a block element */
}

.auth-link {
    font-size: 18px; /* Default font size */
    font-weight: bold;
    text-decoration: none;
}


    @media (max-width: 768px) {
        .layout-grid {
            grid-template-areas:
                'rz-header'
                'rz-body'
                'rz-footer';
        }

        .rz-sidebar {
            display: none; /* Hide sidebar on small screens */
        }

        .header-stack {
            flex-direction: column;
            text-align: center;
        }

        .footer-stack {
            flex-direction: column;
            text-align: center;
        }

        .logo {
            height: 50px;
        }

        .login-display {
            position: static;
            margin-top: 10px;
        }

        .radzen-row {
            flex-direction: column !important; /* Stack columns vertically */
        }

        .radzen-column {
            width: 100% !important; /* Make columns full-width */
            margin-bottom: 20px; /* Add spacing between stacked columns */
        }

        .radzen-card {
            padding: 10px !important; /* Reduce padding */
        }

        h2 {
            font-size: 1.5rem !important; /* Adjust font size for smaller screens */
        }

        .radzen-text {
            font-size: 0.9rem !important; /* Reduce text size */
        }

        .radzen-image {
            max-height: 200px !important; /* Reduce image height */
        }

        .hero-section {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            padding: 20px;
        }

        .hero-content {
            position: relative;
            top: auto;
            left: auto;
            transform: none;
            width: 90%;
            margin: 20px auto;
        }

            .hero-section p {
                font-size: 1rem !important; /* Reduce font size */
            }

            .hero-section button {
                max-width: 80%;
                font-size: 0.9rem !important; /* Reduce button font size */
                padding: 8px 16px !important; /* Adjust button padding */
            }

        .carousel-section {
            padding: 15px 5% !important; /* Reduce padding */
        }

        .carousel-card {
            padding: 10px !important; /* Reduce card padding */
        }

            .carousel-card h3 {
                font-size: 1rem !important; /* Adjust heading size */
            }

            .carousel-card p {
                font-size: 0.9rem !important; /* Adjust paragraph size */
            }

        .contact-row {
            flex-direction: column !important; /* Stack columns vertically */
        }

        .contact-column {
            width: 100% !important; /* Make columns full-width */
            margin-bottom: 20px; /* Add spacing between stacked columns */
        }

        .contact-card {
            padding: 10px !important; /* Reduce padding */
        }

        .contact-header {
            font-size: 1.5rem !important; /* Adjust font size for smaller screens */
            text-align: center;
        }

        .contact-text {
            font-size: 0.9rem !important; /* Reduce text size */
        }

        .contact-image {
            max-height: 200px !important; /* Reduce image height */
        }

        .legal-card {
            padding: 10px !important; /* Reduce padding */
        }

        .legal-header {
            font-size: 1.4rem !important; /* Reduce font size for smaller screens */
            max-width: 90%; /* Allow full width on smaller screens */
            padding: 0 5px; /* Add padding to prevent text from touching edges */
            line-height: 1.4; /* Increase line height for better readability */
        }

        .legal-section {
            margin-bottom: 20px !important; /* Reduce spacing between sections */
        }

        .legal-text {
            font-size: 0.9rem !important; /* Reduce text size */
            line-height: 1.4 !important; /* Adjust line height for readability */
        }

        .services-card {
            padding: 10px !important; /* Reduce padding */
        }

        .services-header {
            font-size: 1.5rem !important; /* Adjust font size for smaller screens */
            text-align: center;
        }

        .services-tabs {
            flex-direction: column !important; /* Stack tabs vertically */
        }

        .services-tab-content {
            font-size: 0.9rem !important; /* Reduce text size */
            line-height: 1.4 !important; /* Improve readability */
        }

        .services-list {
            padding-left: 20px !important; /* Adjust list padding */
        }

        .services-ul {
            padding-left: 15px !important; /* Adjust nested list padding */
        }

        .auth-link {
            font-size: 14px; /* Reduce font size for smaller screens */
        }

    }


    /*.rz-carousel .rz-carousel-navigation {
    color: black !important;*/ /* Change arrow color */
    /*font-size: 2rem;*/ /* Make them larger */
    /*display: flex !important;*/ /* Force them to appear */
    /*opacity: 1 !important;*/ /* Ensure full visibility */
    /*transition: none !important;*/ /* Prevent fade-in effect */
    /*}*/
    /*.rz-carousel .rz-carousel-navigation {
    opacity: 1 !important;*/ /* Ensure full visibility */
    /*transition: none !important;*/ /* Prevent fade-in effect */
    /*}*/
    /*
    .rz-carousel .rz-carousel-navigation:hover {
        opacity: 1 !important;
    }*/
    /*.rz-datatable {
    font-size: 8px;*/ /* Adjust as needed */
    /*}*/
    /* Example of overriding specific Radzen components */
    /*.rz-button {
    background-color: var(--rz-primary);*/ /* Use your primary color */
    /*color: #ffffff;*/ /* White text for buttons */
    /*border-color: var(--rz-primary);*/ /* Consistent border */
    /*}

.rz-textbox {
    border-color: var(--rz-primary);*/ /* Customize textboxes */
    /*}*/