:root {
    --purple-dark: #38255d;
    --purple-main: #9989B6;
    --navy: #22223B;
    --gray-bg: #f8f8f8;
    --gold: #c59d2c;
}

body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    color: #333;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

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

/* 1. Hero Section */
.hero-slider img {
    width: 100%;
    height: auto;
    display: block;
}

/* 2. Portal Buttons */
.portal-section {
    background-color: var(--purple-main);
    padding: 45px 0;
}

.portal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.portal-button {
    text-decoration: none;
    color: white;
    text-align: center;
    font-family: 'Libre Baskerville', serif;
    font-size: 1.2rem;
    transition: transform 0.3s;
}

.portal-button:hover { transform: translateY(-5px); }

.icon-circle {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.2);
}

/* 3. Headline Section */
.headline-section { padding: 80px 0 40px; }
.flex-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.line { height: 2px; background: #e5e5e5; flex-grow: 1; }
h1 { font-family: 'Libre Baskerville', serif; color: var(--purple-dark); font-weight: 400; font-size: 2.5rem; text-align: center;}

/* 4. Split Grid (President & Fleet) */
.split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    padding: 40px 0 80px;
}
.image-box img { width: 100%; border-radius: 6px; }

/* 5. Counters */
.counter-section {
    background-color: var(--navy);
    padding: 60px 0;
    color: white;
}
.counter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    text-align: center;
}
.counter-item .number {
    display: block;
    font-size: 3rem;
    color: var(--purple-main);
}
.counter-item .label { text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px; }

/* 6. Parallax Style */
.parallax-style {
    background: url('https://dignitytransportation.flywheelsites.com/wp-content/uploads/2025/10/Leaders-in-Wheelchair-Accessible-Transportation-since-1990-2-scaled.png') no-repeat center/cover;
    padding: 100px 0;
}
.overlay { background: rgba(255,255,255,0.88); padding: 50px; }
.sub-h { font-family: 'Libre Baskerville', serif; font-size: 1.2rem; }

/* 7. Fleet Accordion */
.acc-item {
    border: 2px solid #e5e5e5;
    padding: 15px 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    color: var(--purple-dark);
    font-weight: bold;
}
.btn-primary {
    display: inline-block;
    padding: 15px 35px;
    background: var(--navy);
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 20px;
    box-shadow: 0 4px 0 #151525;
}

/* 8. CTA Section */
.cta-section {
    background-color: #4A4E69;
    padding: 80px 0;
    color: white;
}
.btn-cta {
    display: inline-block;
    padding: 15px 40px;
    background: var(--purple-main);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 20px;
    border: 1px solid var(--navy);
    box-shadow: 0 4px 0 var(--navy);
}

@media (max-width: 768px) {
    .split-grid { grid-template-columns: 1fr; }
    h1 { font-size: 1.8rem; }
}.counter-item .number {
    display: inline-block; /* Changed from block to keep suffix next to it */
    font-size: 3.25rem;
    color: var(--purple-main);
    font-weight: 400;
}

.counter-item .suffix {
    font-size: 3.25rem;
    color: var(--purple-main);
    font-weight: 400;
}
/* Container for each accordion row */
.acc-item {
    border: 2px solid #e5e5e5;
    margin-bottom: 5px;
    background-color: #fff;
    display: block; /* Ensures content goes UNDER the header */
    width: 100%;
}

/* The clickable top part */
.acc-header {
    width: 100%;
    background: none;
    border: none;
    padding: 13px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--purple-dark);
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    cursor: pointer;
    text-align: left;
}

/* The hidden text area */
.acc-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: #fff;
}

/* Inner padding for the text so it doesn't look cramped */
.acc-content p {
    padding: 0 18px 18px 18px;
    margin: 0;
    color: #333;
    font-size: 1rem;
    line-height: 1.6;
}

/* When active, show content and add the top border line */
.acc-item.active .acc-content {
    max-height: 300px; /* Large enough to fit your text */
    border-top: 2px solid #e5e5e5;
}

/* Rotate the + sign to an x or just rotate it slightly */
.acc-item.active .plus {
    transform: rotate(45deg);
    color: var(--purple-dark);
}

.plus {
    font-size: 1.2rem;
    color: #d3d3d3;
    transition: transform 0.3s ease, color 0.3s ease;
    display: inline-block;
}
/* Basic Menu Visibility Reset */
.x-navbar {
    background: #fff;
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
    position: relative;
}

.x-nav-wrap.desktop {
    display: block !important; /* Forces menu to show if WP scripts are missing */
}

.x-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
}

.x-nav li {
    margin-left: 20px;
}

.x-nav li a {
    text-decoration: none;
    color: #242424;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 16px;
    padding: 20px 0;
    display: inline-block;
}
.ms-1d.x-text .x-text-content-text-primary {
  color: rgb(255,255,255);
}
.ms-16.x-text .x-text-content-text-primary {
  font-family: "Libre Baskerville",serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin-right: calc(-0.035em * -1);
  text-transform: none;
}
.ms-15.x-text .x-text-content-text-primary {
  font-size: calc(285.7%);
  text-align: center;
}
/* SECTION 8: CALL TO ACTION (Mimicking the Original Pro Styles) */
.cta-section {
    background-color: #4A4E69; /* The specific dark slate/purple bg from the source */
    padding: 100px 0; /* Extra breathing room */
    color: #ffffff;
}

.cta-headline {
    font-family: 'Libre Baskerville', serif;
    font-size: 3rem; /* Approx 300% / 48px to match the original "Large" style */
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 25px;
    color: #ffffff; /* Explicitly white */
    text-transform: none;
}

.cta-subheadline {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.25rem;
    line-height: 1.8;
    margin-bottom: 35px;
    color: rgba(255, 255, 255, 0.8); /* Slightly transparent white for the subtext */
}

.btn-cta {
    display: inline-block;
    padding: 18px 45px;
    background-color: #9989B6; /* The light purple from your brand */
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.0625em;
    border-radius: 4px;
    border: 1px solid #22223B;
    box-shadow: 0 4px 0 #22223B;
    transition: all 0.3s ease;
}

.btn-cta:hover {
    background-color: #22223B;
    transform: translateY(-2px);
}

.btn-cta i {
    margin-right: 10px;
}
/* SECTION 6: PERSONAL SERVICE */
.personal-service-section {
    /* Using the background image from your source */
    background-image: url('https://dignitytransportation.flywheelsites.com/wp-content/uploads/2025/10/Leaders-in-Wheelchair-Accessible-Transportation-since-1990-2-scaled.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 0; /* Let the overlay handle the padding */
}

.personal-service-overlay {
    background-color: rgba(255, 255, 255, 0.88); /* The exact color from class ms-8 */
    padding: 100px 20px;
    width: 100%;
}

.headline-large {
    font-family: 'Libre Baskerville', serif;
    font-size: 3rem; /* Matches the 285.7% scale from class ms-15 */
    color: var(--purple-dark);
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 10px;
}

.subheadline-italic {
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    font-size: 1.25rem;
    color: #464646; /* The gray color from class ms-18 */
    margin-bottom: 30px;
}

.services-list-container {
    margin-top: 20px;
}

.services-list-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2rem; /* Matches class ms-1k */
    font-weight: 400;
    line-height: 1.8;
    color: #464646;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .headline-large {
        font-size: 2rem;
    }
    .personal-service-overlay {
        padding: 60px 20px;
    }
}
        /* Footer Styles */
        .admin-footer {
            background-color: #003366; /* Matching the menu background */
            color: #ffffff;
            padding: 20px 0;
            margin-top: 40px; /* Pushes footer away from body content */
            width: 100%;
        }

        .footer-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* Small text requirements */
        .footer-left,
        .footer-right {
            font-size: 0.75rem; /* Relatively small font */
            letter-spacing: 0.5px;
            opacity: 0.9;
        }

        .footer-right {
            font-style: italic;
        }

        .designer-link {
            color: #ffffff;
            text-decoration: underline;
            text-underline-offset: 3px;
            transition: color 0.2s ease;
        }

        .designer-link:hover {
            color: #ffcc00; /* Matching the gold hover from the header */
        }

        /* Responsive Footer */
        @media (max-width: 600px) {
            .footer-container {
                flex-direction: column;
                text-align: center;
                gap: 10px;
            }
        }
        .footer-nav {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allows links to wrap to a new line as you add more */
}

.footer-nav li {
    margin: 5px 15px;
}
/* THE BOTTOM DARK FOOTER */
.x-colophon.bottom {
    background-color: #22223B !important; /* Original Navy Color */
    padding: 50px 0;
    color: #ffffff; /* Sets default text to white */
    text-align: center;
}

/* Social Icon Styling */
.x-social-global {
    margin-bottom: 25px;
}

.x-social-global a {
    color: #ffffff !important;
    font-size: 1.3rem;
    margin: 0 12px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.x-social-global a:hover {
    color: #9989B6 !important; /* Brand purple on hover */
}

/* Dynamic Footer Nav Links */
.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.footer-nav li a {
    color: #ffffff !important;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin: 0 15px;
}

.footer-nav li a:hover {
    color: #9989B6 !important;
}

/* Copyright and Powered By text */
.x-colophon-content {
    font-size: 0.8rem;
    opacity: 0.7; /* Slightly faded white to mimic the original */
}

.x-colophon-content a {
    color: #ffffff;
    text-decoration: underline;
}

.powered-by {
    /*text-transform: uppercase;*/
    letter-spacing: 1px;
    margin-top: 10px;
    font-size:.7em;
}/* Submenu Icon Styling */
.submenu-icon {
    font-size: 0.7rem; /* Smaller than the text */
    margin-right: 10px; /* Space between icon and text */
    color: var(--purple-main); /* Using your brand purple */
    opacity: 0.7;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Hover effect for the dropdown links */
.dropdown-link:hover .submenu-icon {
    transform: translateX(3px); /* Subtle nudge to the right on hover */
    color: var(--gold); /* Change to gold on hover */
    opacity: 1;
}

/* Layout for dropdown items */
.dropdown li {
    display: block;
    width: 100%;
}

.dropdown li a {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    white-space: nowrap;
}
/* Remove the large white space (default padding) from the dropdown list */
.nav-menu ul.dropdown {
    padding-left: 0 !important; /* Removes the 40px default indent */
    margin-left: 0 !important;
    list-style: none !important; /* Ensures no bullets are taking up space */
    /*min-width: 200px;*/ /* Adjust based on your longest menu item */
    display: none; /* Keep hidden until hover */
    position: absolute;
    background-color: #fff;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    z-index: 1000;
}

/* Ensure the list items inside the dropdown take up the full width */
.nav-menu ul.dropdown li {
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Style the links to be flush with the left side */
.nav-menu ul.dropdown li a {
    display: flex;
    align-items: center;
    padding: 12px 20px; /* Control your internal spacing here */
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

/* Position the icon specifically */
.submenu-icon {
    margin-right: 12px;
    width: 14px;
    text-align: center;
    flex-shrink: 0; /* Prevents icon from squishing on long text */
}
/* Center the main container on the page */
.pages-list-container {
    max-width: 900px;
    margin: 40px auto; /* Centers the div horizontally */
    padding: 20px;
    font-family: Arial, sans-serif;
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
}

/* Header section for the Title and Create button */
.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 15px;
}

/* Standard Table Styling */
.standard-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.standard-table th {
    background-color: #f8fafc;
    color: #475569;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.05em;
    padding: 12px 15px;
    border-bottom: 2px solid #e2e8f0;
    text-align: left;
}

.standard-table td {
    padding: 15px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
    vertical-align: middle;
}

.standard-table tr:hover {
    background-color: #f1f5f9;
}

/* Button UI */
.btn-action {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
}

.btn-create {
    background-color: #10b981;
    color: white;
}

.btn-create:hover {
    background-color: #059669;
}

.btn-edit {
    background-color: #3b82f6;
    color: white;
}

.btn-edit:hover {
    background-color: #2563eb;
}
/* Social Media Icon Font Size */
.fa-brands, .fab {
  font-family: "Font Awesome 6 Brands";
  font-size: 12px;
}
.fa-brands-footer, .fab {
  font-family: "Font Awesome 6 Brands";
  font-size: 25px;
}
.signature {
  color: #38255d;    /* Sets the color to Red */
  font-size: 2em;    /* Sets size relative to the parent font size */
  font-style: italic; /* Common for signatures (optional) */
}
/* Container and General UI */
.crud-container { max-width: 1000px; margin: 20px auto; font-family: sans-serif; }

/* Table-style Form using Divs */
.div-table-form { display: table; width: 100%; border-spacing: 0 10px; }
.div-table-row { display: table-row; }
.div-table-label {
    display: table-cell;
    width: 20%;
    padding: 10px;
    font-weight: bold;
    vertical-align: middle;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}
.div-table-input {
    display: table-cell;
    padding: 10px;
    border-bottom: 1px solid #dee2e6;
}

/* Button Styles */
.btn-ui {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}
.btn-add { background-color: #28a745; color: white; }
.btn-edit { background-color: #ffc107; color: #212529; }
.btn-view { background-color: #17a2b8; color: white; }
.btn-delete { background-color: #dc3545; color: white; }
.btn-save { background-color: #007bff; color: white; font-weight: bold; padding: 10px 20px; }
.btn-back { background-color: #6c757d; color: white; }

.btn-ui:hover { opacity: 0.85; color: white; }
    .pagination-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 30px 0;
        width: 100%;
    }

    .pagination-container {
        display: flex;
        align-items: center;
        background: #fff;
        padding: 10px 20px;
        border-radius: 50px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        gap: 15px;
    }

    .pagination-form {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: bold;
        color: #555;
    }

    .pagination-form input[type="number"] {
        width: 60px;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 5px;
        text-align: center;
        font-size: 1em;
        outline: none;
        transition: border-color 0.2s;
    }

    .pagination-form input[type="number"]:focus {
        border-color: #007bff;
    }

    .btn-pagination {
        padding: 8px 18px;
        background-color: #007bff;
        color: white !important;
        text-decoration: none;
        border-radius: 20px;
        font-weight: bold;
        transition: background 0.2s;
    }

    .btn-pagination:hover {
        background-color: #0056b3;
    }

    .btn-pagination.disabled {
        background-color: #e9ecef;
        color: #adb5bd !important;
        cursor: not-allowed;
        pointer-events: none;
    }

    .page-info {
        color: #888;
        font-size: 0.9em;
    }