body {
    font-family: Helvetica, sans-serif;
    margin: 0;
    padding: 20px;
    line-height: 1.6;
    background-color: #F0F8F0; /* Retain as fallback color */
    background-image: url('images/palegreen.webp'); /* Path to your image */
    background-size: cover; /* Scales the image to cover the entire body, maintaining aspect ratio */
    background-position: center; /* Centers the image in the body */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-attachment: fixed; /* Keeps the background fixed while scrolling (optional, for effect) */
    color: #000; /* Retain text color for contrast */
}

header {
    text-align: center;
    background-color: #E6F0E6; /* Softer green, matching Chakai’s header-like tones */
    color:  #3a4832;
    opacity: 0.6;
    padding: 20px;
    max-width: 900px; /* Match the main section’s width */
    margin: 0 auto; /* Centers the header */
    border-radius: 5px 5px 0 0; /* Rounded corners, top-only to blend with body */
}

h1 {
    margin: 0;
    font-size: 3em;
    color: #1d4a4b; /* Dark Green for headings, neutral and readable */
}

h2 {
    color: #2F4F4F;
    margin-bottom: 10px; /* Space below heading */
}

p {
    margin: 0 0 20px 0; /* Space below paragraph */
}

main {
    max-width: 900px;
    margin: 0 auto;
    background-color: #F5F5DC; /* Chakai Beige */
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    text-align: center; /* Centers all text in main */
}

.section {
    background-color: #F5F5DC; /* Beige boxes for FAQ sections, matching main */
    padding: 15px;
    margin: 20px 0;
    border-radius: 5px;
    text-align: left; /* Left-align content for readability */
}

img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
    border-radius: 5px;
}

a {
    color: #557999; /* Blue for contrast */
    text-decoration: underline; /* Added underline for accessibility */
}

a:hover {
    text-decoration: underline; /* Keep or enhance on hover */
}

table {
    width: 100%;
    max-width: 400px;
    margin: 20px 0;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ada76b;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #ada76b;
    color: black;
}

.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #ada76b; /* Chakai matcha green */
    color: black;
    text-decoration: none;
    margin: 10px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}
/* Table styling */
table {
    width: 100%;
    border-collapse: collapse;
    font-family: Helvetica, Arial, sans-serif;
    background-color: #F5F5DC;
    color: #2F4F4F;
}

th, td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ada76b; /* Matches your site’s light border */
}

th {
    background-color: #F0F8F0; /* Green tea header */
    font-weight: bold;
}
.pricing-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Helvetica, Arial, sans-serif;
    background-color: #F5F5DC; /* Beige background */
    color: #2F4F4F; /* Dark slate gray text */
    margin: 0 auto;
    border: 1px solid #ada76b; /* Light border matching your design */
}

.pricing-table th,
.pricing-table td {
    padding: 10px;
    text-align: center; /* Center-align all text for symmetry */
    border: 1px solid #ada76b;
}

.pricing-table th {
    background-color: #ada76b; /* Olive green header (matches screenshot) */
    font-weight: bold;
}

.full-jukebox-servicing-header {
    background-color: #F0F8F0; /* Green tea bar */
    padding: 15px;
    text-align: center;
    font-weight: bold;
    color: #2F4F4F;
    font-size: 1.2em;
    border: 1px solid #ada76b;
}

/* Ensure consistent column widths */
.pricing-table th:nth-child(1),
.pricing-table td:nth-child(1) {
    width: 30%; /* Quantity/Records */
}

.pricing-table th:nth-child(2),
.pricing-table td:nth-child(2) {
    width: 30%; /* Record Type or empty */
}

.pricing-table th:nth-child(3),
.pricing-table td:nth-child(3) {
    width: 40%; /* Price */
}
/* Full Jukebox Servicing Section */
.full-jukebox-servicing-header {
    background-color: #F0F8F0;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    color: #2F4F4F;
    font-size: 1.2em;
    margin-top: 20px;
}
.button:hover {
    background-color: #bdb888; /* Button lightens, a softer hover effect */
}

/* Navigation Links */
.nav-links {
    margin: 20px 0;
    text-align: center;
}

.nav-links a {
    color: #4A4949;
    text-decoration: underline; /* Added underline for accessibility */
    margin: 0 5px;
}

.nav-links a:hover {
    text-decoration: underline; /* Keep or enhance on hover */
}

/* Highlighted Text (for "These need to be songs...") */
.highlight {
    font-weight: bold;
    font-size: 3em; /* 3 sizes larger than default (assuming default is 1em) */
    text-decoration: underline;
    color: #333; /* Matches body text color for consistency */
}

/* Ensure buttons and navigation stay centered/responsive on mobile */
@media screen and (max-width: 1024px) {
    main {
        max-width: 700px; /* Narrower content for tablets */
        padding: 15px;
    }

    .button {
        padding: 8px 16px; /* Smaller buttons */
        font-size: 0.9em;
    }

    .nav-links a {
        margin: 0 8px;
    }
}

@media screen and (max-width: 768px) {
    body {
        padding: 10px; /* Less padding on mobile */
        background-size: contain;
        background-position: center top;
    }

    header {
        padding: 15px;
    }

    h1 {
        font-size: 1.5em; /* Smaller heading on mobile */
    }

    main {
        max-width: 100%; /* Full width on mobile */
        padding: 10px;
    }

    img {
        margin: 15px 0; /* Less margin for images */
    }

    .button {
        display: block; /* Stack buttons vertically on mobile */
        margin: 10px auto; /* Center them */
        width: 80%; /* Wider buttons for touch targets */
    }

    .nav-links a {
        display: block; /* Stack navigation links vertically */
        margin: 5px 0;
    }

    footer {
        padding: 8px;
        font-size: 0.9em; /* Smaller footer text */
    }

    .section {
        padding: 10px;
    }

    .highlight {
        font-size: 2em; /* Reduce size on mobile for readability */
    }
}

@media screen and (max-width: 480px) {
    h2 {
        font-size: 1.1em; /* Even smaller headings */
    }

    p, ul {
        font-size: 0.9em; /* Smaller text for readability on tiny screens */
    }

    .highlight {
        font-size: 1.5em; /* Further reduce size on very small screens */
    }
}

footer {
    text-align: center;
    margin-top: 30px;
    color: #333; /* Corrected from 'black' to '#333' for consistency */
    max-width: 900px; /* Match the main section’s width */
    margin: 0 auto; /* Centers the footer */
    border-radius: 0 0 5px 5px; /* Rounded corners, bottom-only to blend with body */
}

a {
    color: ##4dbece; /* Links in steel blue, matching buttons */
    text-decoration: none;
}

a:hover {
    text-decoration: underline; /* Keep or enhance on hover */
}

.logo {
    max-width: 200px; /* Adjust size as needed to fit the design */
    height: auto;
    display: block;
    margin: 0 auto 10px auto; /* Centers the logo and adds space below */
}