/* This style sheet is loaded when the device-width is between 450px and 1024px */
    /* Author: Kevin Wengert  */
    /* Kinetix Software Solutions */


    /* Styling for body element begins here */
    /* Sets base font family, size, and background color for tablet screens */
    body {
        font-family: Verdana, Arial, sans-serif;
        font-size: 14px;
        background-color: white;
    }


    /* Styling for hr element begins here */
    /* Horizontal divider line – width and blue color */
    hr {
        width: 50%;
        background-color: #0d72a6;
    }


    /* Styling for header elements begin here */
    /* Main header container – background, layout, and text color */
    header {
        background-color: white;
        height: 100%;
        text-align: center;
        color: #0d72a6;
    }

    /* Company name heading in header */
    header h1 {
        font-size: 24px;
        text-transform: uppercase;
        padding: 8px 10px 0px 10px;
        margin: 0;
        box-sizing: border-box;
        height: auto;
    }

    /* Phone number heading in header – centered on tablet */
    header h2 {
        padding: 0px 10px 8px 10px;
        margin: 0;
        font-size: 14px;
        font-weight: normal;
        text-align: center;
        color: #0d72a6;
        background-color: white;
    }

    /* Removes underline from links in header */
    header a {
        text-decoration: none;
    }


    /* Styling for the nav element begins here */
    /* Navigation links – layout, size, color, and hover transition */
    nav a {
        float: left;
        font-size: 16px;
        width: 19%;
        padding: 4px;
        text-align: center;
        color: white;
        text-decoration: none;
        transition: all .5s ease;
    }

    /* Hover state for navigation links – light blue background */
    nav a:hover {
        background-color: #48b7d2;
    }

    /* Styling for the nav class begins here*/
    /* Fixed navigation bar – position, color, shadow, and bold text */
    .nav-wrap {
        position: fixed;
        background-color: #0d72a6;
        font-weight: bold;
        padding: 6px;
        height: 35px;
        left: 0;
        top: 0;
        width: 99%;
        overflow: auto;
        z-index: 9999 !important;
        pointer-events: auto;
    }


    /* Styling for the main elements begins here */
    /* Main content area – reduced padding for tablet */
    main {
        padding: 4px;
    }

    /* Images inside main – full width, centered, block display */
    main img {
        width: 100%;
        margin: auto;
        display: block;
    }

    /* Videos inside main – reduced width for tablet */
    main video {
        width: 75%;
        height: auto;
        text-align: center;
        padding: 4px;
    }

    /* Main level 2 headings – reduced size and padding for tablet */
    main h2 {
        text-transform: uppercase;
        font-size: 24px;
        font-weight: normal;
        color: #0d72a6;
        text-align: center;
        padding: 20px 0 20px;
        margin: 0;
        box-sizing: border-box;
    }


    /* Styling for the form elements begins here */
    /* Fieldsets – width and margin for tablet */
    fieldset {
        width: 80%;
        margin: 15px auto;
        border: 2px solid #0d72a6;
    }

    /* Legends – blue background and white text */
    legend {
        background-color: #0d72a6;
        color: white;
        width: auto;
        padding: 5px;
        font-weight: bold;
    }

    /* Standard input fields – width and margin */
    input {
        width: 95%;
        margin: 5px;
    }

    /* Textarea fields – width, height, and margin */
    textarea {
        width: 95%;
        height: 150px;
        margin: 5px;
    }

    /* Labels – block display for proper spacing */
    label {
        display: block;
    }

    /* Submit button – positioning, colors, and size */
    button {
        margin: 0 10px;
        margin-left: auto;
        margin-right: auto;
        padding: 5px 10px;
        background-color: #0d72a6;
        border-color: #0d72a6;
        color: white;
        font-weight: bolder;
        width: 130px;
    }

    /* Submit button hover state – light blue */
    button:hover {
        background-color: #48b7d2;
        border-color: #48b7d2;
        font-weight: bold;
    }


    /* Styling for the footer elements begins here */
    /* Fixed footer – position, background, text color, and size */
    footer {
        position: fixed;
        left: 0;
        bottom: 0;
        text-align: center;
        width: 100%;
        background-color: #0d72a6;
        color: white;
        padding: 4px 0 4px;
        padding-top: 0;
        font-size: 12px;
    }

    /* Paragraphs inside footer – padding and margin */
    footer p {
        padding: 4px 0 4px 4px;
        margin: 0;
    }


    /* Styling for the different classes begin here */

    /* Styling for the accordion class begins here*/
    /* Container for accordion sections – max width and centering */
    .accordion-container {
        max-width: 1000px;
        margin: auto;
        padding: 0 20px;
    }

    /* Heading above accordion */
    .accordion-container h2 {
        text-align: center;
        color: #0d72a6;
        margin-bottom: 40px;
    }

    /* Individual accordion item – spacing, border, shadow */
    .accordion-item {
        margin-bottom: 30px;
        border: 2px solid #0d72a6;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        background-color: #f8f9fa;
    }

    /* Accordion header (clickable button) */
    .accordion-header {
        width: 100%;
        padding: 18px 20px;
        background-color: #f8f9fa;
        border: none;
        text-align: left;
        font-size: 1.2em;
        font-weight: bold;
        color: #0d72a6;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: background-color 0.3s;
    }

    /* Hover state for accordion header */
    .accordion-header:hover {
        background-color: #e9ecef;
    }

    /* Active (expanded) accordion header */
    .accordion-header[aria-expanded="true"] {
        background-color: #0d72a6;
        color: white;
    }

    /* Plus/minus icon in accordion header */
    .accordion-icon {
        font-size: 1.5em;
        transition: transform 0.3s ease;
    }

    /* Rotates icon when expanded (+ to ×) */
    .accordion-header[aria-expanded="true"] .accordion-icon {
        transform: rotate(45deg);
    }

    /* Accordion content panel – hidden until expanded */
    .accordion-content {
        padding: 0 20px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, padding 0.4s ease;
        background-color: white;
    }

    /* Paragraphs and lists inside accordion content */
    .accordion-content p,
    .accordion-content ul {
        padding: 20px 0;
        line-height: 1.6;
    }

    /* Unordered lists inside accordion content */
    .accordion-content ul {
        padding-left: 30px;
    }

    /* Center videos inside accordion content */
    .accordion-content video {
        display: block;
        margin: 30px auto;
        max-width: 90%;
        height: auto;
        border-radius: 12px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }

    /* Links inside accordion content */
    .accordion-content a {
        color: #0d72a6;
        font-weight: bold;
        text-decoration: none;
    }

    /* Hover state for links in accordion content */
    .accordion-content a:hover {
        text-decoration: underline;
    }

    /* Client logos inside accordion content */
    .accordion-content-logo img {
        display: block;
        max-width: 250px;
        max-height: 100px;
        width: auto;
        height: auto;
        margin: 15px auto;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* Screenshots inside accordion content */
    .accordion-content-screenshot img {
        width: 60%;
        padding: 25px;
    }

    /* Override global img rule for accordion logos */
    .accordion-content .accordion-content-logo img {
        width: auto !important;
        max-width: 250px;
        max-height: 100px;
        height: auto;
        display: block;
        margin: 15px auto;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* Style the link wrapper around logos */
    .accordion-content .accordion-content-logo {
        display: block;
        text-align: center;
        margin: 10px 0;
    }

    /* Force logos in accordion to stay small and centered – overrides global main img rule */
    .accordion-content a.accordion-content-logo img,
    .accordion-content a.accordian-content-logo img {
        width: auto !important;
        max-width: 220px !important;
        height: auto !important;
        max-height: 100px !important;
        display: block !important;
        margin: 20px auto !important;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* Center the link wrapper */
    .accordion-content a.accordion-content-logo,
    .accordion-content a.accordian-content-logo {
        display: block;
        text-align: center;
    }

    /* Left-align list items in accordion */
    .accordion-content ul li {
        text-align: left;
    }

    /* Customer Testimonial Wrapper – Better visual separation */
    .customer-testimonial {
        background-color: #f8fbff;
        border-left: 5px solid #0d72a6;
        border-radius: 10px;
        padding: 25px;
        margin: 35px 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        text-align: center;
    }

    .customer-testimonial blockquote {
        background-color: transparent;
        border: none;
        padding: 0;
        margin: 20px 0;
        font-size: 1.1em;
        line-height: 1.7;
    }

    .customer-testimonial video {
        max-width: 90%;
        border-radius: 10px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
        margin: 20px auto;
    }

    .customer-testimonial .accordion-content-logo {
        margin: 25px auto 10px;
    }

    /* Dark mode support for customer testimonials */
    .dark-mode .customer-testimonial {
        background-color: #2a2a2a;
        border-left-color: #bb86fc;
    }

    .dark-mode .customer-testimonial blockquote {
        color: #e0e0e0;
    }

    /* Styling for the header-title and phone-number classes begins here*/
    /* Flex container for company name and phone number */
    .header-title {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 10px;
        margin: 0;
        background-color: white;
    }

    /* Phone number styling in header */
    .phone-number {
        margin: 0;
        font-size: 24px;
        font-weight: normal;
        color: #0d72a6;
        text-align: right;
        white-space: nowrap;
    }


    /* Styling for the about-us class begins here*/
    /* Main about us section container */
    .about-us {
        max-width: 95%;
        vertical-align: top;
        padding: 4px;
        margin: 15px;
        text-align: center;
        font-size: 18px;
    }

    /* Individual column wrapper in about us */
    .about-us-wrap {
        overflow: hidden;
        vertical-align: top;
        width: 90%;
        display: inline-block;
        height: 300px;
        padding: 4px;
        position: relative;
    }

    /* Background image in about us columns */
    .about-us-bg {
        opacity: 0.15;
        position: absolute;
        left: 0;
        right: 0;
        height: auto;
        width: 100%;
    }

    /* Text overlay in about us columns */
    .about-us-text {
        position: relative;
        vertical-align: top;
        text-align: center;
        padding: 4px;
    }


    /* Styling for the align class begins here*/
    /* Text alignment utility classes */
    .align-left {
        text-align: left;
    }

    .align-right {
        text-align: right;
    }

    .align-center {
        text-align: center;
    }


    /* Styling for the contact-form-wrapper class begins here*/
    /* Contact form container – width, margin, background, shadow */
    .contact-form-wrapper {
        max-width: 75%;
        margin: 40px auto;
        padding: 30px;
        background: white;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        text-align: center;
    }

    /* Fieldsets inside contact form */
    .contact-form-wrapper fieldset {
        width: 100%;
        max-width: none;
        margin: 30px 0;
        padding: 25px;
        border: 2px solid #0d72a6;
        border-radius: 8px;
        box-sizing: border-box;
    }

    /* Legends inside contact form */
    .contact-form-wrapper legend {
        background-color: #0d72a6;
        color: white;
        padding: 8px 20px;
        border-radius: 4px;
        font-weight: bold;
        text-align: left;
    }

    /* Two-column grid inside each fieldset */
    .contact-form-wrapper .fieldset-grid {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 20px 40px;
        align-items: start;
    }

    /* Labels in contact form */
    .contact-form-wrapper label {
        font-weight: bold;
        color: #0d72a6;
        text-align: left;
        margin-top: 12px;
    }

    /* Inputs and textarea in contact form */
    .contact-form-wrapper input,
    .contact-form-wrapper textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    /* Textarea height in contact form */
    .contact-form-wrapper textarea {
        height: 180px;
        resize: vertical;
    }

    /* Error messages in contact form */
    .contact-form-wrapper .error-message {
        grid-column: 2 / 3;
        margin-top: 5px;
    }

    /* Submit button in contact form */
    .contact-form-wrapper button {
        display: block;
        margin: 30px auto 0;
        padding: 15px 40px;
        font-size: 1.2em;
        background-color: #0d72a6;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        min-width: 200px;
        white-space: nowrap;
        text-align: center;
    }

    /* Submit button hover in contact form */
    .contact-form-wrapper button:hover {
        background-color: #48b7d2;
    }

    /* Table styling in contact form wrapper */
    .contact-form-wrapper table {
        width: auto;
        vertical-align: top;
        text-align: center;
        display: inline-block;
        box-sizing: border-box;
    }

    /* Table cells in contact form wrapper */
    .contact-form-wrapper td {
        padding: 6px 25px;
        vertical-align: top;
        text-align: center;
        width: auto;
    }

    /* Paragraphs in table cells */
    .contact-form-wrapper td p {
        color: #0d72a6;
        font-weight: bold;
        text-align: center;
    }


    /* Responsive: single column on smaller tablets */
    @media (max-width: 900px) {
        .contact-form-wrapper .fieldset-grid {
            grid-template-columns: 1fr;
        }

        .contact-form-wrapper label {
            text-align: left;
            grid-column: 1 / 2;
        }

        .contact-form-wrapper input,
        .contact-form-wrapper textarea,
        .contact-form-wrapper .error-message {
            grid-column: 1 / 2;
        }
    }


    /* Styling for the testimonial class begins here*/
    /* Testimonial logos */
    .testimonial img {
        display: block;
        max-width: 230px;
        max-height: 95px;
        width: auto;
        height: auto;
    }

    /* Main container on testimonials page */
    .container {
        max-width: 900px;
        margin: 40px auto;
        padding: 20px;
        background: white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        z-index: auto !important;
    }

    /* Main headings */
    h1,
    h2 {
        text-align: center;
    }

    /* Slideshow Styles */

    /* Slideshow container on testimonials page */
    .slideshow-container {
        max-width: 800px;
        margin: auto;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 20px 60px 60px 60px;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
        z-index: 1;
    }


    /* Blockquote styling for testimonials */
    blockquote {
        position: relative;
        margin: 40px 20px;
        padding: 20px 40px;
        font-style: italic;
        font-size: 1.3em;
        text-align: center;
        line-height: 1.6;
        z-index: auto;
    }

    /* Decorative quotes in blockquotes */
    blockquote::before,
    blockquote::after {
        z-index: auto;
        line-height: 1;
        opacity: 0.6;
        font-family: Georgia, serif;
        font-size: 80px;
        color: darkblue;
        position: absolute;
    }

    blockquote::before {
        content: '“';
        top: -25px;
        left: 40px;
    }

    blockquote::after {
        content: '”';
        bottom: -45px;
        right: 40px;
    }

    /* Individual slides in slideshow */
    .slide {
        display: none;
        text-align: center;
    }


    /* Fade animation for slideshow */
    .fade {
        animation: fade 1.5s;
    }

    @keyframes fade {
        from {
            opacity: 0.4
        }

        to {
            opacity: 1
        }
    }

    /* Attribution (name/title) under testimonial */
    .attribution {
        font-weight: bold;
        font-size: 1.1em;
        margin-top: 20px;
    }

    /* Navigation arrows for slideshow */
    .prev,
    .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        padding: 16px;
        margin-top: -30px;
        color: white;
        font-weight: bold;
        font-size: 24px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 0 5px 5px 0;
        user-select: none;
    }

    .prev {
        left: 0;
        border-radius: 5px 0 0 5px;
    }

    .next {
        right: 0;
        border-radius: 5px 0 0 5px;
    }

    .prev:hover,
    .next:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }

    /* Dots container for slideshow navigation */
    .dots-container {
        text-align: center;
        margin-top: 20px;
    }

    /* Individual dots for slideshow navigation */
    .dot {
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin: 0 5px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }

    .active,
    .dot:hover {
        background-color: #003366;
    }

    /* Product section container on products page */
    .product-section {
        max-width: 1000px;
        margin: 60px auto;
        padding: 0 20px;
    }

    /* Product heading */
    .product-section h3 {
        color: #0d72a6;
        font-size: 2em;
        text-align: center;
        margin-bottom: 30px;
    }

    /* Container for product images/screenshots */
    .product-images {
        text-align: center;
        margin: 30px 0;
    }

    /* Product screenshots */
    .product-screenshot {
        max-width: 100%;
        height: auto;
        margin: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    /* Product client logos */
    .product-logo {
        display: block;
        max-width: 250px;
        height: auto;
        margin: 30px auto;
    }

    /* FAB container – fixed position */
    .fab-container {
        position: fixed;
        bottom: 70px;
        right: 20px;
        z-index: 999;
        cursor: pointer;
    }

    /* FAB main button holder */
    .fab-icon-holder {
        width: 40px;
        height: 40px;
        border-radius: 100%;
        background-color: #0d72a6;
        border-color: #0d72a6;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }

    /* Hover state for FAB button */
    .fab-icon-holder:hover {
        opacity: 0.8;
    }

    /* Icon inside FAB */
    .fab-icon-holder i {
        display: flex;
        align-items: center;
        justify-content: center;

        height: 100%;
        width: auto;
        font-size: 20px;
        color: #ffffff;
    }

    /* Links inside FAB */
    .fab-icon-holder a {
        text-decoration: none;
    }

    /* FAB main circle */
    .fab {
        width: 50px;
        height: 50px;
        background-color: #0d72a6;
    }

    /* FAB options list – hidden until hover */
    .fab-options {
        list-style-type: none;
        margin: 0;

        position: absolute;
        bottom: 70px;
        right: 0;

        opacity: 0;

        transition: all 0.3s ease;
        transform: scale(0);
        transform-origin: 85% bottom;
    }

    /* Show options on hover */
    .fab:hover+.fab-options,
    .fab-options:hover {
        opacity: 1;
        transform: scale(1);
    }

    /* Individual FAB option items */
    .fab-options li {
        display: flex;
        justify-content: flex-end;
        padding: 5px;
    }

    /* Labels next to FAB options */
    .fab-label {
        padding: 2px 5px;
        align-self: center;
        user-select: none;
        white-space: nowrap;
        border-radius: 3px;
        font-size: 16px;
        background-color: #0d72a6;
        color: #ffffff;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
        margin-right: 10px;
    }


    /* Labels on demand section */
    .labelsondemand {
        max-width: 90%;
        vertical-align: top;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 4px;
        text-align: center;
        padding: 4px;
        outline-style: solid;
        outline-color: #0d72a6;
    }

    .labelsondemand-wrap {
        display: inline-block;
        justify-content: center;
    }

    .labelsondemand img {
        display: block;
        max-width: 250px;
        max-height: 100px;
        width: auto;
        height: auto;
    }


    /* Main logo in header */
    .logo {
        border-radius: 9%;
        width: 200px;
        float: right;
    }

    .logo-wrap {
        display: block;
        border-radius: 9%;
        margin-right: 10px;
        margin-top: 10px;
        float: right;
        border: 2px solid #0d72a6;
    }


    /* Section text alignment */
    .sectiontext {
        text-align: center;
        box-sizing: border-box;
    }


    /* Software testimonial boxes */
    .softwaretestimonial {
        width: auto;
        padding: 25px 50px;
        margin: 15px;
        background-color: aliceblue;
        text-align: center;
        font-style: italic;
        outline-style: solid;
        outline-color: #0d72a6;
    }

    .softwaretestimonial ul {
        text-align: left;
    }


    /* Bottom spacer for fixed footer clearance */
    .spacer-bottom {
        margin-bottom: 100px;
        visibility: hidden;
    }

    /* Top spacer for fixed nav clearance */
    .spacer-top {
        padding-top: 25px;
        visibility: hidden;
    }


    /* Testimonial table layout */
    .testimonialtable {
        max-width: 95%;
        padding: 8px;
        margin: 15px;
        text-align: center;
        outline-style: solid;
        outline-color: #0d72a6;
    }

    .testimonialtable table {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .testimonialtable td {
        padding: 4px 20px;
        vertical-align: top;
        text-align: center;
        width: 30%;
        border-style: outset;
        border-color: #0d72a6;
    }

    .testimonialtable img {
        display: block;
        max-width: 230px;
        max-height: 95px;
        width: auto;
        height: auto;
    }


    /* Thank you page styling */
    .thankyou {
        max-width: 90%;
        vertical-align: top;
        margin-left: auto;
        margin-right: auto;
        padding: 4px;
        text-align: center;
    }


    /* Header banner image */
    #banner {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        background-image: url('../images/webbanner.jpg');
        background-repeat: no-repeat;
        background-position: top left;
        background-size: cover;
        height: 200px;
        background-color: white;
    }


    /* Main page wrapper */
    #wrapper {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }


    /* Back to Top Button */
    .back-to-top {
        position: fixed;
        bottom: 70px;
        right: 160px;
        width: 50px;
        height: 50px;
        background-color: #0d72a6;
        color: white;
        border: none;
        border-radius: 50%;
        font-size: 24px;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease;
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .back-to-top.visible {
        opacity: 1;
        visibility: visible;
    }

    .back-to-top:hover {
        opacity: 0.8 !important;
        background-color: #0d72a6;
    }

    /* Theme Toggle Button */
    .theme-toggle-container {
        position: fixed;
        bottom: 70px;
        right: 100px;
        z-index: 10000;
    }

    .theme-toggle {
        width: 50px;
        height: 50px;
        background-color: #0d72a6;
        color: white;
        border: none;
        border-radius: 50%;
        font-size: 20px;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        transition: opacity 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .theme-toggle:hover {
        opacity: 0.8 !important;
    }

    /* Dark mode styles */
    body.dark-mode {
        background-color: #121212;
        color: #e0e0e0;
    }

    .dark-mode header,
    .dark-mode .accordion-item,
    .dark-mode .contact-form-wrapper,
    .dark-mode .accordion-content {
        background-color: #1e1e1e;
        color: #e0e0e0;
    }

    .dark-mode .accordion-header {
        background-color: #2d2d2d;
        color: #bb86fc;
    }

    .dark-mode .accordion-header:hover {
        background-color: #3d3d3d;
    }

    .dark-mode .accordion-header[aria-expanded="true"] {
        background-color: #bb86fc;
        color: #121212;
    }

    .dark-mode a {
        color: #bb86fc;
    }

    .dark-mode a:hover {
        color: #985eff;
    }

    .dark-mode .accordion-content p,
    .dark-mode .accordion-content ul,
    .dark-mode blockquote {
        color: #e0e0e0;
    }

    .dark-mode fieldset {
        border-color: #bb86fc;
    }

    .dark-mode legend {
        background-color: #bb86fc;
    }


    /* Dark Mode – all floating buttons purple, fade on hover */
    .dark-mode .back-to-top,
    .dark-mode .theme-toggle,
    .dark-mode .fab-icon-holder,
    .dark-mode .fab {
        background: #bb86fc !important;
    }

    .dark-mode .back-to-top:hover,
    .dark-mode .theme-toggle:hover,
    .dark-mode .fab-icon-holder:hover,
    .dark-mode .fab:hover {
        opacity: 0.8 !important;
    }

    /* FAB labels in dark mode */
    .dark-mode .fab-label {
        background: #bb86fc !important;
        color: #121212;
    }

    /* About Us Page – Dark Mode Specific */
    .dark-mode .about-us {
        background-color: #1e1e1e;
    }

    .dark-mode .about-us-wrap {
        background-color: #1e1e1e;
        box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
    }

    .dark-mode .about-us-bg img {
        opacity: 0.3;
    }

    .dark-mode .about-us-text {
        background-color: rgba(30, 30, 30, 0.8);
        color: #e0e0e0;
    }

    .dark-mode .about-us h2,
    .dark-mode .about-us h3 {
        color: #bb86fc;
    }

    .dark-mode .about-us p {
        color: #e0e0e0;
    }

    .dark-mode .about-us a {
        color: #bb86fc;
    }

    .dark-mode .about-us a:hover {
        color: #985eff;
        text-decoration: underline;
    }

    /* Testimonials Page – Dark Mode Specific */
    .dark-mode .container {
        background-color: #1e1e1e;
        color: #e0e0e0;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
    }

    .dark-mode .slideshow-container {
        background-color: #1e1e1e;
        border-color: #444;
    }

    .dark-mode blockquote {
        color: #e0e0e0;
        background-color: #2d2d2d;
    }

    .dark-mode blockquote::before,
    .dark-mode blockquote::after {
        color: #bb86fc;
        opacity: 0.4;
    }

    .dark-mode .attribution {
        color: #bb86fc;
    }

    .dark-mode .testimonial img {
        filter: brightness(1.1);
    }

    /* Navigation arrows in dark mode */
    .dark-mode .prev,
    .dark-mode .next {
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
    }

    .dark-mode .prev:hover,
    .dark-mode .next:hover {
        background-color: rgba(0, 0, 0, 0.9);
    }

    /* Dots navigation in dark mode */
    .dark-mode .dot {
        background-color: #555;
    }

    .dark-mode .dot:hover,
    .dark-mode .active {
        background-color: #bb86fc;
    }

    /* Headings in testimonials container */
    .dark-mode .container h2 {
        color: #bb86fc;
    }

    /* Header – Dark Mode */
    .dark-mode header {
        background-color: #1e1e1e !important;
    }

    .dark-mode .header-title {
        background-color: #1e1e1e;
    }

    .dark-mode .header-title h1 {
        color: #bb86fc;
    }

    .dark-mode .phone-number {
        color: #e0e0e0;
        background-color: transparent;
    }

    .dark-mode .phone-number:hover {
        color: #bb86fc;
    }

    /* Banner background in dark mode */
    .dark-mode #banner {
        background-color: #121212;
    }

    /* Logo in dark mode – slight brighten if needed */
    .dark-mode .logo {
        filter: brightness(1.2);
    }

    /* Dark Mode – Navigation Bar */
    .dark-mode .nav-wrap {
        background-color: #1e1e1e !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    }

    .dark-mode nav a {
        color: #e0e0e0;
    }

    .dark-mode nav a:hover {
        background-color: #bb86fc;
        color: #121212;
    }

    /* Footer – Dark Mode */
    .dark-mode footer {
        background-color: #1e1e1e !important;
        color: #e0e0e0;
    }

    .dark-mode footer small {
        color: #e0e0e0;
    }

    .dark-mode footer a {
        color: #bb86fc;
    }

    .dark-mode footer a:hover {
        color: #985eff;
    }

    /* Mobile adjustments */
    @media (max-width: 450px) {
        .back-to-top {
            bottom: 80px;
            right: 20px;
            width: 45px;
            height: 45px;
            font-size: 20px;
        }

        .theme-toggle-container {
            bottom: 140px;
            right: 20px;
        }

        .theme-toggle {
            width: 45px;
            height: 45px;
            font-size: 18px;
        }
    }

    /* Remove bullets from specific unordered lists */
    ul.no-bullets {
        list-style-type: none;
    }