/* Base styles */
    html { scroll-behavior: smooth; }
    body { font-family: 'Inter', 'Arial', sans-serif; background: #f9fafb; color: #222; }
    .fa-star { color: #fbbf24; }
    h3 {
        font-size: 2rem;
        font-weight: 600;
        color: #047857;
        margin-bottom: 1rem;
    }

    /* Define the CSS class for your error message styling */
    .error-message-style {
        color: red;
        font-weight: bold;
        text-align: center;
        padding: 10px;
        border: 1px solid red;
        background-color: #ffe0e0;
        margin-bottom: 20px;
    }

    /* Optional: Styles for your no-db-error flag (it will be hidden by JS anyway) */
    #no-db-error {
        display: none; /* Keep this hidden by default */
    }
        
    /* Header */
    /* Place logo and navigation side-by-side */
    header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    header {
        background: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 1rem 0;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    /* Hero Section */
    .hero {
        text-align: center;
        padding: 2rem 0;
        background: #f9f9f9;
    }

    .hero h1 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .subhead {
        font-size: 1.2rem;
        color: #666;
        margin-bottom: 2rem;
    }

   .responsive-video {
       position: relative;
       width: 100%;
       padding-bottom: 56.25%; /* 16:9 aspect ratio */
       height: 0;
       overflow: hidden;
   }

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

    .video-container {
        margin: 2rem auto;
        width: 560px;
    /*    max-width: 800px; */
    }

    video {
        width: 100%;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    .cta-button-large {
        background: #4CAF50;
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 4px;
        font-size: 1.1rem;
        font-weight: bold;
        text-decoration: none;
        display: inline-block;
        margin-top: 1rem;
    }

    .container {
        width: 90%;
        max-width: 1200px;
        margin: 0 auto;
    }

    nav {
        display: flex;
        gap: 1.5rem;
        align-items: center;
    }

    nav a {
        text-decoration: none;
        color: #333;
    }

    .cta-button {
        background: #4CAF50;
        color: white;
        padding: 0.5rem 2rem;
        border-radius: 4px;
        font-weight: bold;
        margin-top: 1rem;
        display: inline-block;
    }

    .logo {
        height: 80px;
        max-height: 100px; /* Adjust as needed */
    }

    /* Table styles */
    .table-fixed thead { background: #c7f9cc; }
    .table-fixed th { cursor: pointer; }
    .table-fixed tr:nth-child(even) { background-color: #e7f7ef; }

    /* Utility styles */
    ::-webkit-scrollbar { display: none; }
    [x-cloak] { display: none !important; }
    .overflow-x-auto, .overflow-y-auto { overflow: visible !important; }

    /* FAQ accordion styles */
    .faq-item input[type="checkbox"] { display: none; }
    .faq-item label { 
    cursor: pointer; 
    display: block; 
    padding: 0.75rem 1rem; 
    font-weight: 600; 
    background: #c7f9cc; 
    border-radius: 8px; 
    transition: background 0.2s;
    }
    .faq-item label:hover { 
        background: #bdf2bf;
        color: white;
    }
    .faq-answer { 
        max-height: 0; 
        overflow: hidden; 
        transition: max-height 0.3s cubic-bezier(0.45,0,0.55,1);
    }
    .faq-item input[type="checkbox"]:checked ~ .faq-answer { 
        max-height: 1200px; 
        padding-bottom: 0.75rem;
    }

    .price {
        font-size: 1.5rem;
        color: #4CAF50;
        font-weight: bold;
    }

    /* Button styles */
    .btn { 
        @apply py-2 px-4 rounded bg-green-600 text-white font-bold shadow hover:bg-green-700; 
    }
    .btn-outline { 
        @apply py-2 px-4 rounded border border-green-600 text-green-700 bg-white hover:bg-green-600 hover:text-white font-semibold; 
    }

    /* Pagination styles */
    .pagination {
        display: inline-block;
    }
    .pagination a {
        color: black;
        float: left;
        margin-top: 10px;
        padding: 3px 10px 0px 10px;
        text-decoration: none;
    }
    .pagination a.active {
        background-color: #4CAF50;
        color: white;
        border-radius: 3px;
    }
    .pagination a:hover:not(.active) {
        background-color: #ddd;
        border-radius: 3px;
    }

    /* Form input width overrides */
    #name, #email, #featurePackage, #businessName, #businessWebsite, #businessAddress,
    #businessCity, #businessEmail, #businessPhone, #businessType, #businessMessage {
        width: 50% !important;
    }

    /* Responsive adjustments */
    
    @media (max-width: 1024px) {
        .directory-table th, .directory-table td { 
            font-size: 0.92rem; 
            padding: 0.2rem 0.45rem;
        }
    }

    @media (max-width: 600px) {
        .directory-table, 
        .directory-table thead, 
        .directory-table tbody, 
        .directory-table th, 
        .directory-table td, 
        .directory-table tr {
            display: block;
        }
        .directory-table tr { 
            border-bottom: 1px solid #d9f99d; 
            margin-bottom: 1rem; 
        }
        .directory-table th { 
            position: absolute; 
            left: -9999px;
        }
        .directory-table td {
            position: relative;
            padding-left: 40%;
            min-height: 2.5rem;
            border: none;
            border-bottom: 1px solid #bfdbfe;
        }
        .directory-table td:before {
            position: absolute;
            left: 0.5rem;
            top: 0.2rem;
            width: 35%;
            white-space: nowrap;
            font-weight: bold;
            color: #047857;
            content: attr(data-label);
        }
    }

    @media (max-width: 768px) {
        #modal {
            position: fixed !important;
            top: 15% !important;
            left: 2px !important;
            right: 2px !important;
            width: auto !important;
            max-width: 95% !important;
            height: auto !important;
            max-height: 80% !important;
            overflow-y: auto !important;
        }

        #modalContent {
            overflow-wrap: break-word;
        }

        .flex.items-center.ml-0.md\:ml-4 {
            flex-direction: column;
            align-items: flex-start;
        }

        .flex.items-center.ml-0.md\:ml-4 > label {
            margin-bottom: 5px;
            margin-right: 0 !important;
        }

        .flex.items-center.ml-0.md\:ml-4 > input[type="text"] {
            width: 100%;
            margin-bottom: 10px;
            margin-left: 0 !important;
        }
    }

    .hamburger {
        display: none;
        cursor: pointer;
    }

    .hamburger-box {
        width: 40px;
        height: 24px;
        display: inline-block;
        position: relative;
    }

    .hamburger-inner {
        display: block;
        top: 50%;
        margin-top: -2px;
    }

    .hamburger-inner,
    .hamburger-inner::before,
    .hamburger-inner::after {
        width: 40px;
        height: 4px;
        background-color: #333;
        border-radius: 4px;
        position: absolute;
        transition-property: transform;
        transition-duration: 0.15s;
        transition-timing-function: ease;
    }

    .hamburger-inner::before,
    .hamburger-inner::after {
        content: "";
        display: block;
    }

    .hamburger-inner::before {
        top: -10px;
    }

    .hamburger-inner::after {
        bottom: -10px;
    }

    .mobile-nav {
        display: none;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 0;
    }

    @media (max-width: 768px) {
        .desktop-nav { display: none; }
        .hamburger { display: block; }
        .mobile-nav.is-active {
            display: flex;
        }
    }