/* book.css */

/* -------------------- */
/*  1. General Styles   */
/* -------------------- */

:root {
    --primary-color: #C9F31DFF;      /* Lime Green - Accent */
    --secondary-color: #333333;      /* Dark Gray - For text on primary, or primary button hover */
    --text-color: #212529;           /* Dark Gray/Black - Main text color */
    --background-color: #ffffff;     /* White - Main background */
    --box-background: #ffffff;       /* White for boxes, can use #f8f9fa for off-white with subtle contrast */
    --service-icon-color: #1a73e8;  /* Blue - Icons, links */
    --light-text-on-dark-bg-color: #ffffff; /* For text on dark backgrounds (e.g., hero image) */
    --border-color: #dee2e6;          /* Light gray for borders */
    --medium-text-color: #555555;     /* Medium dark gray for secondary text */
    --light-gray-bg: #f8f9fa;        /* Very light gray for subtle backgrounds */
}
body {
    font-family: 'Kanit', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.frame-content {
    overflow: hidden;
}

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

a {
    color: var(--service-icon-color); /* Default link color to blue */
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-color);
}

h2 {
    text-align: center;
    color: var(--text-color);
    margin-bottom: 20px;
    font-size: 2.5rem;
}

/* -------------------- */
/*  2. Header Styles    */
/* -------------------- */

.container1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px 20px;
    background-color: var(--background-color); /* Light background */
    border-bottom: 1px solid var(--border-color); /* Add a border for separation */
}

.logo-wrap img {
    height: 50px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: var(--background-color); /* Light background */
    padding: 0;
    margin-left: auto;
}


.logo {
    font-size: 30px;
    margin-left: 10px;
    font-weight: 700;
    color: var(--text-color); /* Dark text */
    text-decoration: none;
}

.nav-links a {
    font-size: 14px;
    font-weight: 400;
    padding: 8px;
    color: var(--text-color); /* Dark text */
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--primary-color);
}

/* Book Now Button */
.book-now-btn {
    padding: 8px 16px;
    margin-left: 10px;
    background-color: var(--primary-color);
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--secondary-color); /* Dark text on lime */
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.book-now-btn:hover {
    background-color: var(--secondary-color); /* Dark background */
    color: var(--primary-color); /* Lime text */
}

/* Hamburger Icon - Black */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 1001;
}

.menu-toggle span {
    display: block;
    height: 3px;
    width: 25px;
    background-color: var(--text-color); /* Dark bars for hamburger */
    transition: 0.3s ease;
    border-radius: 2px; /* Added from later definition */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        background-color: var(--background-color); /* Light background for mobile menu */
        position: absolute;
        top: 100%;
        left: 0; /* Align to left for full width */
        width: 100%;
        text-align: center; /* Center links */
        padding: 10px 0;
        border-top: 1px solid var(--border-color);
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .nav-links.active { /* This was .show in later media query, changed to .active for consistency */
        display: flex;
    }

    .nav-links a {
        padding: 15px 20px; /* More specific than later padding: 10px */
        color: var(--text-color); /* Ensure dark text */
    }
}

/* -------------------- */
/*  3. Hero Section      */
/* -------------------- */

#hero {
    padding: 60px 20px 0;
    text-align: center;
    background-color: var(--background-color); /* CHANGED: White background */
    /* background-image: url(...); REMOVED background image */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* background-attachment: fixed; No longer needed without image */
    position: relative;
    border-bottom: 1px solid var(--border-color); /* Optional: Add a border if needed for separation */
}

/* REMOVED: #hero::before pseudo-element for dark overlay, no longer needed */

.hero-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-bottom: 50px;
    position: relative;
    z-index: 2; /* z-index might not be strictly necessary anymore */
}

.hero-text {
    width: 60%; /* Increased width as there's no side image anymore */
    padding: 35px 0 0;
    text-align: center; /* Center text if no image beside it */
}

.hero-image {
    width: 40%;
    height: 500px;
    background-image: url(Assets/hero.jpg); 
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 8px;
}
@media (max-width: 768px) {
    .hero-text {
        width: 100%; /* Already set in general mobile queries */
    }
    .hero-image {
        display: none; /* Typically hide decorative side images on mobile if not primary content */
    }
}


.hero-subtitle {
    font-family: 'Kanit';
    font-size: 20px;
    font-weight: 400;
    color: var(--medium-text-color); /* CHANGED: Darker text for light background */
    padding-bottom: 18px;
    border-bottom: 1px none transparent;
}

.hero-title {
    font-family: 'Kanit';
    font-size: 25px; /* Larger font size for impact on plain background */
    font-weight: 600;
    color: var(--text-color); /* CHANGED: Dark text for light background */
    line-height: 1.2; /* Adjusted line height */
    padding: 20px 0 0;
}

.hero-title.primary {
    color: var(--primary-color); /* Lime green for accent - still works well */
    padding-bottom: 19px;
}

/* -------------------- */
/*  4. About Section     */
/* -------------------- */

#about {
    text-align: center;
    background-color: var(--background-color);
    padding: 100px 20px 40px;
}

#about img{
    height:66px;
}

.about-intro {
    font-family: 'Kanit';
    font-size: 25px;
    font-weight: 500;
    color: var(--text-color); /* Dark text */
    padding: 0 0 20px 0;
    max-width: 1000px;
    margin: 0 auto;
    line-height: 52px;
}

.about-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 10px;
}

.about-buttons button {
    padding: 10px 42px;
    background-color: var(--primary-color);
    border: none;
    border-radius: 5px;
    font-family: 'Kanit';
    font-size: 18px;
    font-weight: 500;
    color: var(--secondary-color); /* Dark text on lime */
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.about-buttons button:hover{
    background-color: var(--secondary-color); /* Dark background */
    color: var(--primary-color); /* Lime text */
}


/* -------------------- */
/*  5. Gallery Section   */
/* -------------------- */

#gallery {
    padding: 80px 20px;
    background-color: var(--background-color); /* Light */
    text-align: center;
    color: var(--text-color); /* Dark text */
}

#gallery h2 {
    margin-bottom: 50px;
    color: var(--text-color); /* Dark text */
    position: relative;
}

#gallery h2:after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background-color: var(--text-color); /* Dark underline */
    margin: 15px auto 0;
}

.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-item {
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--box-background); /* Light box */
    color: var(--text-color); /* Dark text */
    border: 1px solid var(--border-color); /* Added border */
    border-radius: 8px;
}

.gallery-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.gallery-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
    border-top-left-radius: 8px; /* Match item radius */
    border-top-right-radius: 8px;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-title {
    padding: 15px;
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-color);
    background-color: transparent; /* Let item background show */
}

.gallery-description {
    padding: 0 15px 20px;
    margin: 0;
    color: var(--text-color);
    background-color: transparent; /* Let item background show */
}


/* -------------------- */
/*  6. Service Section   */
/* -------------------- */

#services { /* This refers to the first definition of #services */
    padding: 20px;
    font-family: sans-serif; /* Original was sans-serif, will be overridden by inline style block */
    background-color: var(--background-color); /* Light background */
}
#services .container { /* This is a generic container, may conflict if not unique */
    max-width: 960px;
}
#services h2 { /* General h2 styling applies, this is more specific if needed */
    margin-bottom: 20px;
    color: var(--text-color); /* Dark text */
    text-align: center;
    font-size: 2em;
}
.service-container { /* This is the grid container inside #services */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.service-item { /* General service item, might be overridden by inline styles' specificity */
    aspect-ratio: 1/1; /* Can make items square, review if this is desired over inline style height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--box-background); /* Light box background */
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Standard shadow for light */
    padding: 25px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-color); /* Added border */
}
.service-item:hover {
    transform: translateY(-5px); /* Adjusted hover effect */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
.service-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: var(--service-icon-color);
    background-color: rgba(26, 115, 232, 0.1); /* Light blue background for icon */
    height: 80px;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.service-item h3 {
    font-size: 1.5rem;
    margin-bottom: 5px;
    color: var(--text-color); /* Dark text */
}
.service-item h4 {
    font-size: 1rem;
    color: var(--medium-text-color); /* Slightly lighter dark text */
    margin-bottom: 10px;
    font-weight: 500;
}
.service-item p {
    font-size: 0.9rem;
    color: #777777; /* Medium dark gray */
    margin-bottom: 15px;
}
/* Service Details (the pop-out pane) */
.service-details {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-color); /* Light background */
    border-radius: 12px; /* Match parent */
    padding: 20px;
    overflow-y: auto;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    text-align: left;
    z-index: 100;
    transition: opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    color: var(--text-color); /* Ensure text inside is dark */
}

.service-details[style*="display: block"] {
    opacity: 1;
    pointer-events: auto;
}
/* Ensure text inside service-details (like table, h4, h5) is dark */
.service-details h4, .service-details h5, .service-details p, .service-details li {
    color: var(--text-color);
}
.service-details table { /* Ensure table text is dark by default */
    color: var(--text-color);
}
.service-details th { /* Headers in table can be different, e.g., if TH background is dark */
    color: var(--light-text-on-dark-bg-color); /* If TH background is dark blue as per inline style */
}


/* Common Rules - Light Theme */
.common-rules {
    background-color: var(--light-gray-bg); /* Light gray or white */
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    color: var(--text-color); /* Dark text */
    border-radius: 12px;
    font-family: 'Kanit', sans-serif;
    border: 1px solid var(--border-color);
    margin: 40px auto;
    max-width: 1200px; /* To match .container */
}

.common-rules h4 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: var(--text-color);
}

.common-rules ul {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 25px;
    text-align: left;
    display: inline-block;
}

.common-rules li {
    padding: 5px 0;
    color: var(--text-color);
}


/* Button Styles - some already defined, this is a general rule */
.service-details-btn, /* Covered by later specific styles for #services inline block */
#common-rules-book-now { /* Book Now button for Common Rules */
    background-color: var(--service-icon-color); /* Blue */
    color: var(--light-text-on-dark-bg-color); /* White */
    border: none;
    padding: 8px 16px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background-color 0.3s ease;
    margin-top: auto;
    display: inline-block;
}

.service-details-btn:hover,
#common-rules-book-now:hover {
    background-color: #1557b0; /* Darker blue */
}

.car-type-select {
    width: 100%;
    padding: 8px;
    margin: 10px 0;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background-color: var(--background-color);
    color: var(--text-color);
}

.pricing-display {
    margin: 10px 0;
    padding: 10px;
    background-color: #e9ecef; /* Light gray for display area */
    border-radius: 5px;
    font-size: 0.9rem;
    color: var(--text-color);
}

/* -------------------- */
/*  7. Testimonials      */
/* -------------------- */

#testimonials {
    padding: 80px 20px;
    background-color: var(--background-color); /* Light */
    text-align: center;
}

#testimonials h2 {
    margin-bottom: 50px;
    color: var(--service-icon-color); /* Blue accent */
}

#testimonials h2:after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background-color: var(--service-icon-color); /* Blue */
    margin: 15px auto 0;
}

.testimonial-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.testimonial-card {
    background-color: var(--box-background); /* Light box */
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 400px;
    position: relative;
    border: 1px solid var(--border-color);
}

.testimonial-card:before {
    content: '"';
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 5rem;
    color: rgba(26, 115, 232, 0.1); /* Light blue quote */
    line-height: 1;
}

.testimonial-text {
    font-style: italic;
    margin-bottom: 20px;
    color: var(--medium-text-color); /* Dark gray text */
    position: relative;
    z-index: 1;
}

.testimonial-user {
    display: flex;
    align-items: center;
    margin-top: 20px;
}
.testimonial-user h4 { /* Ensure h4 within testimonial is dark */
    color: var(--text-color);
}
.testimonial-user .star-rating i { /* Ensure stars are visible */
    color: #ffc107; /* Yellow stars */
}


/* -------------------- */
/*  8. Call to Action   */
/* -------------------- */

#call-to-action {
    padding: 50px 20px;
    text-align: center;
    background-color: var(--primary-color); /* Using primary for a vibrant CTA */
}

#call-to-action h2 {
    font-family: 'Kanit';
    font-size: 60px;
    font-weight: 500;
    color: var(--secondary-color); /* Dark text on lime bg */
}

/* -------------------- */
/*  9. Footer Styles    */
/* This is for <footer id="footer"> */
/* -------------------- */

#footer {
    background-color: var(--background-color); /* Light bg */
    padding: 50px 20px; /* Original: 50px 20px. Inline: 60px 20px. Keeping 50px */
    text-align: center; /* Original was center */
    color: var(--text-color); /* Dark text */
    border-top: 1px solid var(--border-color);
    font-family: 'Kanit'; /* Original was Kanit */
}

/* Styles from the inline block for #footer - applying specific footer structure */
#footer .container { /* The flex container inside #footer */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    text-align: left; /* Override parent center for columns */
}
#footer .footer-left, #footer .footer-links, #footer .footer-form {
    flex: 1;
    min-width: 250px; /* approx */
}
#footer .footer-form {
    min-width: 300px;
    max-width: 400px;
    margin: 0; /* Reset margin if any from global */
}

#footer h3 { /* General h3 in #footer */
    color: var(--text-color);
    font-family: 'Kanit';
    font-weight: 500;
    margin-bottom: 15px;
    font-size: 22px; /* From inline style */
}
#footer .footer-left h3, #footer .footer-links h3 { /* Titles of columns */
    color: var(--primary-color); /* Lime accent for footer column titles */
}
#footer .footer-form h3 { /* Title for booking inquiry form */
    color: var(--text-color); /* Dark */
    text-align: center;
}


#footer p,
#footer li,
#footer label {
    font-family: 'Kanit';
    font-size: 16px;
    font-weight: 300;
    color: var(--text-color);
}
#footer .footer-left p { /* Paragraphs in contact info */
    margin-bottom: 10px;
}


#footer a { /* General links in #footer */
    text-decoration: none;
    color: var(--service-icon-color); /* Blue for links */
    font-weight: normal; /* Reset from bold if needed */
}
#footer .footer-left a { /* Contact links */
    color: var(--service-icon-color);
    font-weight: 500; /* from inline */
}
#footer .footer-left a:hover, #footer .footer-links ul li a:hover {
    color: var(--primary-color);
    text-decoration: underline; /* Added standard hover */
}


.footerform-input-field, /* Shared between both footers, defined later */
#footer .footerform-input-field-drop { /* Specific to #footer if dropdown exists */
    width: 100%;
    padding: 12px; /* from inline */
    margin: 8px 0;
    border: 1px solid var(--border-color);
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: 'Kanit';
    border-radius: 8px; /* from inline */
    font-size: 16px; /* from inline */
    outline: none;
    transition: 0.3s ease-in-out;
}
#footer .footerform-input-field:focus,
#footer .footerform-input-field-drop:focus {
    border-color: var(--service-icon-color);
    background: var(--light-gray-bg);
}


#footer .footer-submit-btn {
    background-color: var(--secondary-color); /* Dark button */
    color: var(--light-text-on-dark-bg-color); /* Light text */
    padding: 12px; /* from inline */
    border: none;
    margin-top: 15px; /* from inline */
    cursor: pointer;
    font-family: 'Kanit';
    border-radius: 8px; /* from inline */
    width: 100%; /* from inline */
    font-size: 16px; /* from inline */
    font-weight: bold; /* from inline */
    transition: 0.3s;
}

#footer .footer-submit-btn:hover {
    background-color: lighten(var(--secondary-color), 10%); /* Slightly lighter dark */
}

#footer .social-icons {
    margin-top: 15px; /* from inline */
    display: flex; /* from inline */
    gap: 15px; /* from inline */
}
#footer .social-icons a {
    margin: 0; /* Reset from original general .social-icons a */
    color: var(--primary-color); /* Lime social icons */
    font-size: 22px; /* from inline */
    transition: 0.3s ease-in-out;
}
#footer .social-icons a:hover {
    color: var(--secondary-color); /* Darker hover */
    transform: scale(1.1);
}

#footer .footer-links ul {
    list-style: none;
    padding: 0;
}
#footer .footer-links li {
    margin: 8px 0;
}
#footer .footer-links ul li a {
    color: var(--service-icon-color); /* Blue links */
    font-size: 16px; /* from inline */
}

#footer .about-section { /* About text in footer */
    text-align: center;
    margin-top: 40px;
    font-size: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-color);
}
#footer .about-section h3 {
    color: var(--text-color); /* Ensure dark for this specific h3 */
}

#footer .footer-bottom { /* Copyright section */
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    font-size: 14px;
    color: var(--text-color);
    width: 100%; /* Ensure it spans full width of its container */
}
#footer .footer-bottom a {
    color: var(--service-icon-color); /* Blue link */
    font-weight: bold; /* from inline */
}
#footer .footer-bottom a:hover {
    text-decoration: underline;
    color: var(--primary-color);
}


/* -------------------- */
/* 10. Booking Modal   */
/* -------------------- */

.booking-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Overlay stays dark */
    z-index: 1100;
    overflow: auto;
}

.booking-modal.active {
    display: flex; /* Changed to flex for centering */
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.booking-container {
    background-color: var(--background-color); /* Light */
    width: 90%;
    max-width: 600px;
    margin: 5% auto; /* Original had 15% auto, then 20px. Keeping 5% for now */
    padding: 30px; /* Original: 30px. Inline HTML had 20px. Keeping 30px */
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: slideIn 0.4s;
    color: var(--text-color); /* Ensure text inside is dark */
}
.booking-container h2 { /* Modal title */
    color: var(--text-color);
}


@keyframes slideIn {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.booking-form .form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-color); /* Dark label */
}

.booking-form .form-control {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s;
    background-color: var(--background-color);
    color: var(--text-color);
}

.booking-form .form-control:focus {
    border-color: var(--service-icon-color); /* Blue focus */
    outline: none;
}

.booking-form textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

.booking-modal .btn-primary { /* Submit button in modal */
    background-color: var(--service-icon-color); /* Blue */
    color: var(--light-text-on-dark-bg-color); /* White text */
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%;
}

.booking-modal .btn-primary:hover {
    background-color: #1557b0; /* Darker blue */
}

.booking-modal .btn-close { /* Close button X */
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #666;
    cursor: pointer;
    transition: color 0.3s;
    float: right; /* From inline HTML */
}

.booking-modal .btn-close:hover {
    color: var(--text-color);
}

/* -------------------- */
/* 11. Mobile Menu Animation (Hamburger Active State) */
/* -------------------- */

.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.whatsapp-float {
    position: fixed;
    bottom: 20px; /* Original: 20px. Inline: 40px. Keeping 20px */
    right: 20px;  /* Original: 20px. Inline: 40px. Keeping 20px */
    background-color: #25D366; /* WhatsApp Green */
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Original: 50%. Inline: 50px. Keeping 50% */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease-in-out, opacity 0.5s ease-in-out; /* Added opacity transition */
    z-index: 1001; /* Original: 1001. Inline: 1000. Keeping 1001 */
    opacity: 0; /* Initially hidden for JS to reveal */
}
.whatsapp-float.visible { /* Class added by JS */
    opacity: 1;
}

.whatsapp-float img {
    width: 40px; /* Original: 40px. Inline: 50px. Keeping 40px */
    height: 40px;
    /* margin-top: 5px; from inline, remove if not needed with flex centering */
}

.whatsapp-float:hover {
    transform: scale(1.1);
    background-color: #1ebe57; /* Slightly darker green */
}

/* -------------------- */
/* 12. Footer (this targets the plain <footer> tag without an ID) */
/* This seems to be for a contact form that was in a footer */
/* -------------------- */
footer:not(#footer) {
  background: var(--background-color); /* Light background */
  color: var(--text-color); /* Dark text */
  text-align: center;
  padding: 40px 20px;
  border-top: 1px solid var(--border-color); /* Add separation */
}

footer:not(#footer) .footer-contact { /* This was a form wrapper */
  max-width: 600px;
  margin: 0 auto;
  background: var(--box-background); /* Light gray or white */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Standard shadow */
  border: 1px solid var(--border-color);
}
footer:not(#footer) h3 { /* If there's an h3 in this footer */
    color: var(--text-color);
}


/* Form Input Fields in the second footer's .footer-contact */
footer:not(#footer) .input-field,
footer:not(#footer) .input-field-drop {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid var(--border-color); /* Light border */
  border-radius: 5px;
  background: var(--background-color); /* White background for input */
  color: var(--text-color); /* Dark text */
  font-size: 16px;
}

footer:not(#footer) .input-field::placeholder {
  color: #777; /* Gray placeholder */
}

footer:not(#footer) .input-field-drop {
  cursor: pointer;
}

/* Form Group - Align Inputs */
footer:not(#footer) .form-group {
  display: flex;
  gap: 10px;
}

footer:not(#footer) .form-group .input-field {
  flex: 1;
}

/* Submit Button in second footer's .footer-contact */
footer:not(#footer) .submit-btn {
  width: 100%;
  padding: 12px;
  background: var(--primary-color); /* Lime green */
  color: var(--secondary-color); /* Dark text */
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
  transition: 0.3s;
}

footer:not(#footer) .submit-btn:hover {
  background: #A8D300; /* Darker lime */
}

/* -------------------- */
/* 11. Media Queries (Consolidated) */
/* -------------------- */

@media (max-width: 768px) {

    .hero-content {
        flex-direction: column;
    }

    .hero-text {
        width: 100%;
        padding: 20px 0;
        text-align: center;
    }

    .hero-image {
        width: 100%;
        height: 300px;
    }

    /* Mobile Nav styles are already defined earlier under .header */

    .service-container {
        grid-template-columns: 1fr; /* Stack service items */
    }

    .booking-container { /* Responsive modal */
        margin: 20px;
        width: calc(100% - 40px); /* More responsive width */
    }

    #gallery h2 {
        font-size: 2rem;
    }

    .hero-title { /* Adjust hero title for mobile */
        font-size: 36px; /* Adjusted from 60px, base is 25px */
        line-height: 1.2;
    }
     #call-to-action h2 { /* Adjust CTA title for mobile */
        font-size: 30px;
    }


    .gallery-item img {
        height: 180px;
    }

    .testimonial-card {
        max-width: 100%;
    }

    /* Responsive Design for form group in the second footer (footer:not(#footer)) */
    footer:not(#footer) .form-group {
        flex-direction: column;
    }

    /* Responsive nav-links from later in original CSS (align items, text-align) */
    /* These were mostly covered by the earlier nav-links @media query */
    /* .nav-links {
      align-items: flex-start;
      text-align: left;
    } This might conflict with earlier text-align:center, choose one.
      Keeping center for mobile dropdown.
    */
}

/* --- Button Styling (Generic .btn) --- */
.btn {
    display: inline-block;
    padding: 10px 15px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    text-align: center;
    font-size: 1rem;
    margin: 0 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
    box-sizing: border-box;
}

.btn-primary {
    background-color: var(--service-icon-color); /* Blue */
    color: var(--light-text-on-dark-bg-color); /* White */
}
.btn-primary:hover {
    background-color: #0056b3; /* Darker blue */
}

.btn-secondary {
    background-color: #6c757d; /* Bootstrap secondary gray */
    color: var(--light-text-on-dark-bg-color); /* White */
}
.btn-secondary:hover {
    background-color: #5a6268; /* Darker gray */
}


/* --- Mobile Button Visibility & Layout (Hero Section) --- */
.hero-mobile-buttons {
    display: none; /* Hide by default on larger screens */
    width: 100%;
    margin-top: 20px;
    padding: 0 10px;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .hero-mobile-buttons {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        text-align: center;
    }

    .hero-mobile-buttons .btn {
        flex: 0 1 auto;
        white-space: nowrap;
        padding: 10px 16px;
        border-radius: 8px;
        font-weight: 600;
        text-decoration: none;
        border: none;
        min-width: 90px;
        transition: background-color 0.3s, transform 0.2s;
    }

    .hero-mobile-buttons .btn:hover {
        transform: translateY(-2px);
    }

    /* 🎨 Color themes */
    .hero-mobile-buttons .btn-primary {
        background-color: #007bff;
        color: #fff;
    }

    .hero-mobile-buttons .btn-primary:hover {
        background-color: #0069d9;
    }

    .hero-mobile-buttons .btn-secondary {
        background-color: #6c757d;
        color: #fff;
    }

    .hero-mobile-buttons .btn-secondary:hover {
        background-color: #5a6268;
    }

    /* Optional: Add a subtle shadow for better touch UI */
    .hero-mobile-buttons .btn {
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
}



/* Styles for the inlined #services section from HTML <style> block */
/* These were already quite light-mode friendly, ensuring they use variables or light colors */
#services { /* This selector from HTML style block is more specific for the section */
    background-color: var(--background-color); /* Explicitly white */
    padding: 40px 20px;
    font-family: 'Roboto', Arial, sans-serif; /* Overrides Kanit for this specific section */
}

#services .section-subtitle { /* Assuming this class is only in this #services block */
    color: var(--text-color); /* Dark text */
    text-align: center;
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 30px;
}

/* Service items from inline styles - these have high specificity */
#services .service-container .service-item {
    background: var(--box-background); /* White */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-color); /* Ensure border for definition */
    aspect-ratio: auto; /* Override general .service-item aspect-ratio if it was applied */
}

#services .service-container .service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

#services .service-item .service-image {
    height: 50%;
    min-height: 240px;
    max-height: 300px;
    width: 100%;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    background-color: #f0f0f0; /* Light gray placeholder */
    animation: pulse 1.5s ease-in-out 3;
    transition: transform 0.3s ease;
}

#services .service-item .service-image:hover {
    transform: scale(1.05);
}

#services .service-item .service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#services .service-item .service-content {
    text-align: center;
    padding: 20px;
    flex: 0 0 auto;
}

#services .service-item h3,
#services .service-item h4,
#services .service-item p {
    color: var(--text-color); /* Explicit dark text, was #000000 */
}
#services .service-item h3 { font-size: 26px; font-weight: 600; line-height: 1.3; margin-bottom: 12px; }
#services .service-item h4 { font-size: 22px; font-weight: 600; line-height: 1.3; margin-bottom: 12px; }
#services .service-item p { font-size: 17px; line-height: 1.5; margin-bottom: 12px; }


#services .service-details-btn,
#services .book-now-btn { /* Buttons within this #services styled block */
    background-color: #ffcc00; /* Yellow */
    color: var(--secondary-color); /* Dark text on yellow */
    border: none;
    padding: 12px 24px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 17px;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

#services .service-details-btn:hover,
#services .book-now-btn:hover {
    background-color: #e6b800; /* Darker yellow */
}

/* Details pane within these service items */
#services .service-details {
    background-color: var(--light-gray-bg); /* Light gray */
    padding: 20px;
    border-radius: 5px;
    margin-top: 15px;
    color: var(--text-color); /* Dark text */
}
#services .service-details h4,
#services .service-details h5,
#services .service-details p,
#services .service-details li {
    color: var(--text-color); /* Explicit dark text, was #000000 */
}
#services .service-details h4 { font-size: 19px; font-weight: 600; line-height: 1.3; margin-bottom: 10px; }
#services .service-details h5 { font-size: 17px; font-weight: 600; line-height: 1.3; margin-bottom: 10px; }
#services .service-details p, #services .service-details li { font-size: 15px; line-height: 1.5; margin-bottom: 10px; }

#services .service-details ul {
    padding-left: 20px;
    margin-bottom: 15px;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* Table Styles from inline block - for #services section */
#services .table-responsive {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow-x: auto;
    border-radius: 8px; /* From inline */
}

#services table { /* Specific to tables inside #services if not globally styled */
    width: auto;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 5px;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-color: var(--background-color); /* White table */
    border-radius: 8px;
    font-size: 13px;
    overflow: hidden;
}

#services th, #services td {
    padding: 10px 14px;
    text-align: center;
    color: var(--text-color); /* Dark text for cells */
}

#services th {
    background-color: #1a73e8; /* Blue header */
    color: var(--light-text-on-dark-bg-color); /* White text */
    font-size: 13px; /* From inline */
}
#services tr:nth-child(even) { background-color: #f2f4f8; } /* Light gray zebra */
#services tr:hover { background-color: #e0f3ff; } /* Light blue hover */
#services td:first-child { font-weight: 600; color: #37474f; } /* Dark gray for first cell */


/* Media queries from inline block specific to #services */
@media (max-width: 768px) {
    #services .service-item { /* Specific to service items in the HTML styled #services section */
        max-width: 95%;
        min-height: 360px;
    }
    #services .service-item .service-image { min-height: 180px; max-height: 220px; }
    #services .service-item h3 { font-size: 20px; }
    #services .service-item h4 { font-size: 18px; }
    #services .service-item p { font-size: 14px; }
    #services .service-details h4 { font-size: 16px; }
    #services .service-details h5 { font-size: 15px; }
    #services .service-details p, #services .service-details li { font-size: 13px; }
    #services table { min-width: 100%; font-size: 12px; }
    #services th, #services td { padding: 8px 10px; }
}

/* Styles for popup form (from HTML <style> block for the "Free Tour Itinerary" popup) */
/* Using body prefix for higher specificity to override general styles if needed */
body .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay is fine */
    z-index: 1000;
}
body .popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--background-color); /* Light background */
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    z-index: 1001;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    color: var(--text-color); /* Dark text */
}
body .popup .close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
    color: #888; /* Gray close button */
}
body .popup .tour-heading {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    border-bottom: 3px solid #ff7e5f; /* Orange accent */
    color: #2c3e50; /* Dark blue/gray text */
    margin-bottom: 20px;
}
body .popup .tour-heading span { /* The gradient text */
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
body .popup #contactForm { /* The form itself */
    display: flex;
    flex-direction: column;
}
body .popup #contactForm label { /* Labels in this specific form */
    color: var(--text-color);
    margin-bottom: 5px; /* Added for spacing */
}
body .popup .input-field, body .popup .input-field-drop {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid var(--border-color); /* Light border */
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--background-color); /* White input bg */
    color: var(--text-color); /* Dark input text */
}
body .popup .input-field::placeholder { color: #777; }

body .popup .submit-btn { /* Submit button for this popup */
    background: linear-gradient(to right, #ff7e5f, #feb47b); /* Orange gradient */
    color: var(--light-text-on-dark-bg-color); /* White text */
    border: none;
    padding: 12px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s ease;
}
body .popup .submit-btn:hover { opacity: 0.9; }
body .popup #message { /* Message display in popup */
    margin-top: 10px;
    text-align: center;
    display: none;
    /* Color set by JS (green for success) */
}
@media (max-width: 600px) { /* Responsive for this specific popup */
    body .popup { width: 95%; padding: 15px; }
    body .popup .tour-heading { font-size: 20px; }
}


/* Final check for table styles that might be global or from another HTML block */
/* These styles are very generic and might affect tables outside their intended scope if not careful */
/* The version from #services is more specific. This could be a default table style. */
table { /* Generic table styling */
    width: auto; /* Default, can be overridden */
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 5px;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Softer shadow for light mode */
    background-color: var(--background-color); /* White background */
    border-radius: 8px;
    font-size: 0.9rem; /* Was 9px, increased for readability */
    overflow: hidden;
    border: 1px solid var(--border-color); /* Add border for definition */
}
table th, table td {
    padding: 8px 12px;
    text-align: center;
    color: var(--text-color); /* Dark text */
}
table th {
    background-color: var(--service-icon-color); /* Blue header */
    color: var(--light-text-on-dark-bg-color); /* White text */
    font-weight: bold;
}
table tr:nth-child(even) { background-color: var(--light-gray-bg); /* Light gray zebra stripe */ }
table tr:hover { background-color: #e0f3ff; transition: background-color 0.3s ease; } /* Light blue hover */
table td:first-child { font-weight: 600; color: #37474f; /* Darker gray for first cell text */ }

.table-responsive { /* General table responsive wrapper */
    width: 100%;
    display: flex; /* Can cause issues if not all tables are meant to be centered */
    justify-content: center; /* Center the table if it's narrower than container */
    overflow-x: auto;
    border-radius: 8px; /* Match table if table has border */
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 90px; /* Position next to WhatsApp float or adjust */
    background-color: var(--secondary-color);
    color: var(--light-text-on-dark-bg-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
    z-index: 1000;
    opacity: 0; /* JS can make it visible on scroll */
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}
.back-to-top:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}