/* General Styling */
:root {
    --primary-color: #007bff; /* A nice blue for an aquatic feel */
    --secondary-color: #00bfff; /* Lighter blue */
    --accent-color: #28a745; /* Green for health/growth */
    --dark-color: #333;
    --light-color: #f8f9fa;
    --text-color: #555;
    --white: #fff;
    --shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    --new-accent-gray: #f0f0f0; /* Very light, subtle gray background for content blocks */
    --mid-gray-background: #e9ecef; /* Slightly darker gray for section backgrounds */
    --light-border-gray: #d0d0d0; /* A color for subtle borders on cards/forms */
    --form-message-border: #c0c0c0; /* Specific darker gray for form messages */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--light-color);
}

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

a {
    color: var(--primary-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--dark-color);
    margin-bottom: 10px;
    font-weight: 600;
}

h2 { font-size: 2.5em; }
h3 { font-size: 2em; }
h4 { font-size: 1.8em; }

p {
    margin-bottom: 15px;
}

.btn {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    border: none;
    cursor: pointer;
}

.primary-btn {
    background-color: var(--primary-color);
    color: var(--white);
}

.primary-btn:hover {
    background-color: #0056b3;
    text-decoration: none;
}

.secondary-btn {
    background-color: var(--white);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    margin-left: 10px;
}

.secondary-btn:hover {
    background-color: var(--primary-color);
    color: var(--white);
    text-decoration: none;
}

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

section {
    padding: 60px 0;
}

/* REPLACING ORIGINAL .hero-section and MODIFYING .hero-section video */

.hero-section {
    position: relative; /* For positioning video/overlay */
    overflow: hidden;   /* To clip video if it scales larger */
    padding: 0;         /* Remove default padding */
    min-height: 100vh;  /* Make the section itself fill the viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    /* ORIGINAL BACKGROUND IMAGE (fallback if video doesn't load) */
    background: url('../images/hero-bg.jpg') no-repeat center center/cover;
}

.hero-section video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%; /* Make the video element take 100% width of its parent */
    height: 100%; /* Make the video element take 100% height of its parent */
    object-fit: cover; /* This is the key: scale to cover, maintaining aspect ratio */
    object-position: center; /* Center the video content within its frame */
    z-index: 1;         /* Places video behind content and overlay */
    pointer-events: none; /* <--- NEW: Ignore mouse events on the video itself */
    transform: translateX(-50%) translateY(-50%); /* Centers the video element */
    filter: brightness(0.6); /* Slightly dim the video for text readability */
    /* Add for better browser support: */
    background-size: cover; /* Fallback for very old browsers */
}

.hero-overlay { /* Separate overlay for consistent dimming */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2); /* Another layer of dimming */
    z-index: 2; /* Between video and content */
    pointer-events: none; /* <--- NEW: Ignore mouse events on the overlay */
}

.hero-content {
    position: relative; /* Position content above video and overlay */
    z-index: 3;
    max-width: 900px; /* Constrain content width */
    padding: 20px;
    /* Ensure text color and shadow stand out */
    color: var(--white);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero-content h2 {
    font-size: 4em; /* Larger text for impact */
    font-weight: 700;
    margin-bottom: 25px;
}

.hero-content p {
    font-size: 1.5em;
    margin-bottom: 50px;
}

.hero-content .btn {
    font-size: 1.2em;
    padding: 15px 35px;
    margin: 0 10px;
}

/* Mute/Unmute Button */
.mute-button {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4; /* Above video and overlay */
    transition: background-color 0.3s ease;
}

.mute-button:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

/* Ensure global HTML/BODY don't prevent scrolling */
/* Check your general CSS setup (e.g., at the very top of style.css) */
/* MAKE SURE these rules are NOT present: */
/* html, body { height: 100%; overflow: hidden; } */
/* If you have height: 100% on body, remove it to allow natural content flow */
/* It should generally be:
html { height: 100%; }
body { min-height: 100%; display: flex; flex-direction: column; } // For sticky footer
*/


/* Adjustments for smaller screens for video banner */
@media (max-width: 992px) {
    .hero-content h2 {
        font-size: 3em;
    }
    .hero-content p {
        font-size: 1.2em;
    }
}

@media (max-width: 768px) {
    .hero-content h2 {
        font-size: 2.5em;
    }
    .hero-content p {
        font-size: 1em;
    }
    .hero-content .btn {
        font-size: 1em;
        padding: 12px 25px;
        margin: 5px;
        width: 80%; /* Stack buttons on small screens */
        display: block;
    }
}

@media (max-width: 480px) {
    .hero-content h2 {
        font-size: 2em;
    }
    .hero-content p {
        font-size: 0.9em;
    }
    .mute-button {
        width: 35px;
        height: 35px;
        font-size: 1em;
        bottom: 10px;
        right: 10px;
    }
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4); /* Dark overlay */
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.hero-content h2 {
    font-size: 3.5em;
    margin-bottom: 20px;
    color: var(--white);
    font-weight: 700;
}

.hero-content p {
    font-size: 1.4em;
    margin-bottom: 40px;
    color: var(--white);
}

/* Accent Gray Backgrounds and Borders - REVISED */

/* General card/item styling - these are the individual boxes/cards */
.service-card,
.feature-item,
.plan-card,
.dashboard-card,
.pricing-tier-card,
.gallery-item,
.service-detail-item,
.contact-info,
.contact-form-container,
.admin-card,
.admin-section,
.builder-form-area,
.important-note-section,
.mini-popup-content
{
    background-color: var(--white); /* Default white, then add a border */
    border: 1px solid var(--light-border-gray); /* Subtle border for definition */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Lighter shadow for a softer look */
}

/* Apply the very light gray background to main content sections */
.intro-section,
.key-services-preview,
.ponds-intro-section,
.design-steps-section,
.dashboard-content,
.gallery-section,
.service-detail-page-content,
.pool-intro-section
{
    background-color: var(--new-accent-gray); /* Use the very light gray for background */
    border: none; /* Remove border if it's a full background section */
    box-shadow: none; /* Remove shadow if it's a full background section */
}

/* For specific background elements that you want a distinct background, e.g., the existing .light-bg */
/* If you want pricing info blocks to have a distinct background */
.pricing-info,
.admin-form-container
{
    background-color: var(--mid-gray-background); /* Apply the slightly darker gray */
    border: 1px dashed var(--primary-color); /* For a distinct dashed border if desired */
    box-shadow: none; /* Remove shadow for these background elements if the background is the key */
}


/* Adjustments for specific elements that use the new gray */
.form-message {
    background-color: var(--new-accent-gray);
    border: 1px solid #c0c0c0; /* Specific darker gray for message border */
}

.admin-table th, .admin-table td {
    border: 1px solid var(--light-border-gray); /* Consistent table borders */
}

/* Intro Section */
.intro-section {
    text-align: center;
    padding: 80px 20px;
    background-color: var(--white);
    box-shadow: var(--shadow);
    margin-top: -50px; /* Overlap with hero for visual effect */
    position: relative;
    z-index: 2;
    border-radius: 10px;
}

.intro-section h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
}

/* Key Services Preview */
.key-services-preview {
    background-color: var(--light-color);
    padding: 80px 0;
}

.key-services-preview h4 {
    text-align: center;
    margin-bottom: 40px;
    color: var(--primary-color);
}

.service-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.service-card {
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 25px;
    text-align: center;
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
}

.service-card img {
    max-width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.service-card h5 {
    color: var(--dark-color);
    font-size: 1.5em;
    margin-bottom: 10px;
}

.service-card p {
    font-size: 0.95em;
    color: var(--text-color);
    min-height: 70px; /* Ensure consistent height for cards */
}

.read-more {
    display: inline-block;
    margin-top: 15px;
    color: var(--primary-color);
    font-weight: 600;
    transition: color 0.3s ease;
}

.read-more:hover {
    color: var(--accent-color);
    text-decoration: none;
}

/* Why Choose Us */
.why-choose-us {
    background-color: var(--white);
    padding: 80px 0;
    text-align: center;
}

.why-choose-us h4 {
    color: var(--primary-color);
    margin-bottom: 40px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.feature-item {
    padding: 30px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    background-color: var(--light-color);
    transition: transform 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-5px);
}

.feature-item i {
    font-size: 3em;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.feature-item h5 {
    font-size: 1.4em;
    color: var(--dark-color);
    margin-bottom: 10px;
}

.feature-item p {
    font-size: 0.9em;
    color: var(--text-color);
}


/* Call to Action Banner */
.call-to-action-banner {
    background-color: var(--primary-color);
    color: var(--white);
    text-align: center;
    padding: 60px 20px;
}

.call-to-action-banner h3 {
    color: var(--white);
    font-size: 2.5em;
    margin-bottom: 15px;
}

.call-to-action-banner p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

.call-to-action-banner .btn {
    background-color: var(--accent-color);
    color: var(--white);
    font-size: 1.1em;
    padding: 15px 35px;
}

.call-to-action-banner .btn:hover {
    background-color: #218838;
}

/* Footer */
footer {
    background-color: var(--dark-color);
    color: var(--white);
    padding: 60px 0 20px;
    font-size: 0.9em;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.footer-column h4 {
    color: var(--white);
    margin-bottom: 20px;
    font-size: 1.2em;
}

.footer-column p {
    color: rgba(255, 255, 255, 0.7);
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
}

.footer-column ul li a:hover {
    color: var(--secondary-color);
    text-decoration: none;
}

.footer-column .fa-phone-alt,
.footer-column .fa-envelope,
.footer-column .fa-map-marker-alt {
    margin-right: 10px;
    color: var(--secondary-color);
}

.social-links a {
    color: var(--white);
    font-size: 1.5em;
    margin-right: 15px;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: var(--secondary-color);
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
}

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

    nav ul {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 80px; /* Below header */
        left: 0;
        background-color: var(--white);
        box-shadow: var(--shadow);
        padding: 20px 0;
        z-index: 999;
    }

    nav ul.active {
        display: flex;
    }

    nav ul li {
        margin: 10px 0;
        text-align: center;
    }

    nav ul li a {
        padding: 10px 0;
        display: block;
    }

    .hero-content h2 {
        font-size: 2.5em;
    }

    .hero-content p {
        font-size: 1.1em;
    }

    .btn {
        display: block;
        width: 80%;
        margin: 10px auto;
    }

    .secondary-btn {
        margin-left: 0;
    }

    .intro-section {
        margin-top: 20px; /* Adjust for smaller screens */
    }

    .service-cards, .features-grid, .footer-grid {
        grid-template-columns: 1fr;
    }

    .service-card, .feature-item {
        margin-bottom: 20px;
    }

    .logo h1 {
        font-size: 1.5em;
    }
}

@media (max-width: 480px) {
    .hero-section {
        padding: 80px 20px;
        min-height: 400px;
    }
    .hero-content h2 {
        font-size: 2em;
    }
    .hero-content p {
        font-size: 1em;
    }
    .intro-section {
        padding: 40px 20px;
    }
    h3 { font-size: 1.5em; }
    h4 { font-size: 1.3em; }
}
/* Add to your existing css/style.css file */

/* Page Hero/Banner for sub-pages */
.page-hero {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 80px 20px;
    text-align: center;
}

.page-hero h2 {
    color: var(--white);
    font-size: 2.8em;
    margin-bottom: 15px;
}

.page-hero p {
    font-size: 1.2em;
    max-width: 800px;
    margin: 0 auto;
}

/* Service Section Common Styling */
.service-section {
    padding: 80px 0;
}

.service-section h3 {
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 40px;
    font-size: 2.2em;
}

.service-section p {
    font-size: 1.05em;
    line-height: 1.7;
    margin-bottom: 25px;
}

.service-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.service-detail-item {
    background-color: var(--white);
    padding: 30px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
}

.service-detail-item:hover {
    transform: translateY(-5px);
}

.service-detail-item h4 {
    color: var(--dark-color);
    font-size: 1.4em;
    margin-bottom: 15px;
}

.service-detail-item p {
    font-size: 0.95em;
    line-height: 1.6;
}

.pricing-info {
    background-color: var(--light-color);
    border: 1px dashed var(--primary-color);
    border-radius: 10px;
    padding: 30px;
    margin-top: 40px;
}

.pricing-info h5 {
    color: var(--primary-color);
    font-size: 1.4em;
    margin-bottom: 20px;
    text-align: center;
}

.pricing-info ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.pricing-info ul li {
    background-color: var(--white);
    padding: 10px 15px;
    margin-bottom: 8px;
    border-left: 4px solid var(--accent-color);
    border-radius: 5px;
    font-size: 0.95em;
    display: flex;
    align-items: center;
}

.pricing-info ul li:last-child {
    margin-bottom: 0;
}

.pricing-info .note {
    font-style: italic;
    font-size: 0.85em;
    text-align: center;
    color: var(--text-color);
    margin-top: 20px;
}

/* Maintenance Plans Grid */
.maintenance-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.plan-card {
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 30px;
    text-align: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
    border: 2px solid transparent;
}

.plan-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-color);
}

.plan-card h4 {
    color: var(--primary-color);
    font-size: 1.8em;
    margin-bottom: 10px;
}

.plan-card .plan-frequency {
    font-style: italic;
    color: var(--text-color);
    margin-bottom: 20px;
    font-size: 0.9em;
}

.plan-card ul {
    list-style: none;
    text-align: left;
    margin-bottom: 25px;
    padding-left: 20px;
}

.plan-card ul li {
    margin-bottom: 10px;
    color: var(--dark-color);
    font-size: 0.95em;
    display: flex;
    align-items: center;
}

.plan-card ul li i {
    color: var(--accent-color);
    margin-right: 10px;
}

.plan-card .plan-pricing {
    font-size: 1.6em;
    font-weight: 700;
    color: var(--primary-color);
    margin-top: auto; /* Push to bottom if cards have varying content */
    padding-top: 15px; /* Space from list */
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Specialized Services Grid */
.specialized-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.special-service-item {
    background-color: var(--white);
    padding: 25px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    transition: background-color 0.3s ease;
}

.special-service-item:hover {
    background-color: #e6f7ff; /* Light blue hover */
}

.special-service-item h5 {
    color: var(--primary-color);
    font-size: 1.3em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.special-service-item h5 i {
    font-size: 1.2em;
    margin-right: 10px;
    color: var(--secondary-color);
}

.special-service-item p {
    font-size: 0.9em;
    line-height: 1.5;
    color: var(--text-color);
}

/* Specific Section Backgrounds */
.light-bg {
    background-color: var(--light-color);
}

/* Responsive adjustments for this page */
@media (max-width: 768px) {
    .page-hero {
        padding: 60px 20px;
    }
    .page-hero h2 {
        font-size: 2em;
    }
    .service-section {
        padding: 40px 0;
    }
    .service-section h3 {
        font-size: 1.8em;
    }
    .pricing-info {
        padding: 20px;
    }
    .pricing-info h5 {
        font-size: 1.2em;
    }
    .maintenance-plans-grid, .service-details-grid, .specialized-services-grid {
        grid-template-columns: 1fr;
    }
    .plan-card, .service-detail-item, .special-service-item {
        margin-bottom: 20px;
    }
    .plan-card h4 {
        font-size: 1.5em;
    }
    .plan-card .plan-pricing {
        font-size: 1.4em;
    }
}
/* Add to your existing css/style.css file */

/* Gallery Section */
.gallery-section {
    padding: 80px 0;
    background-color: var(--light-color);
}

.gallery-section h2 {
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 40px;
}

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

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

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

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay h4 {
    color: var(--white);
    font-size: 1.4em;
    margin-bottom: 10px;
}

.gallery-overlay p {
    font-size: 0.9em;
    line-height: 1.5;
}

/* Magnific Popup Styling (add to your CSS) */
.mfp-fade.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

.mfp-title {
    text-align: center;
    font-size: 1.1em;
    color: #fff;
    margin-top: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .gallery-section {
        padding: 60px 0;
    }
    .gallery-section h2 {
        font-size: 2em;
    }
}
Add these new rules to your existing style.css file.
/* Add to your existing css/style.css file */

/* About Us Section Styling */
.about-us-content {
    padding: 80px 0;
}

.about-intro {
    text-align: center;
    margin-bottom: 60px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.about-intro h3 {
    color: var(--primary-color);
    margin-bottom: 25px;
    font-size: 2.2em;
}

.about-grid {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    gap: 40px;
    align-items: flex-start; /* Align top */
    margin-bottom: 60px;
}

.about-image {
    flex: 1; /* Allows it to grow/shrink */
    min-width: 300px; /* Minimum width before wrapping */
    text-align: center;
}

.about-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: var(--shadow);
    margin-bottom: 10px;
}

.about-image .image-caption {
    font-style: italic;
    font-size: 0.9em;
    color: var(--text-color);
}

.about-text {
    flex: 2; /* Allows it to take more space */
    min-width: 300px; /* Minimum width before wrapping */
}

.about-text h4 {
    color: var(--dark-color);
    margin-bottom: 15px;
    font-size: 1.8em;
}

.about-text ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.about-text ul li {
    margin-bottom: 12px;
    font-size: 1.05em;
    color: var(--text-color);
    display: flex;
    align-items: flex-start;
}

.about-text ul li i {
    color: var(--primary-color);
    margin-right: 15px;
    font-size: 1.2em;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.about-future {
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 40px;
    border-top: 1px solid rgba(0,0,0,0.1);
}

.about-future h4 {
    color: var(--primary-color);
    margin-bottom: 25px;
    font-size: 2em;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .about-us-content {
        padding: 40px 0;
    }
    .about-intro h3 {
        font-size: 1.8em;
    }
    .about-grid {
        flex-direction: column; /* Stack columns on smaller screens */
        gap: 30px;
    }
    .about-image, .about-text {
        min-width: unset; /* Remove min-width for stacking */
        width: 100%; /* Take full width */
    }
    .about-text h4, .about-future h4 {
        font-size: 1.5em;
    }
    .about-text ul li {
        font-size: 1em;
    }
}
Add these new rules to your existing style.css file.
/* Add to your existing css/style.css file */

/* Contact Section */
.contact-section {
    padding: 80px 0;
    background-color: var(--light-color);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Info takes less space, form takes more */
    gap: 50px;
    align-items: flex-start;
}

.contact-info {
    background-color: var(--white);
    padding: 40px;
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.contact-info h3 {
    color: var(--primary-color);
    margin-bottom: 25px;
    font-size: 2em;
}

.contact-info p {
    margin-bottom: 20px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.info-item i {
    font-size: 1.8em;
    color: var(--secondary-color);
    margin-right: 20px;
    flex-shrink: 0;
}

.info-item h4 {
    font-size: 1.2em;
    color: var(--dark-color);
    margin-bottom: 5px;
}

.info-item p {
    margin: 0;
    font-size: 0.95em;
    color: var(--text-color);
}

.info-item p a {
    color: var(--text-color); /* Make link color consistent with text */
}

.info-item p a:hover {
    color: var(--primary-color);
}

.info-item .service-cities {
    font-size: 0.85em;
    color: #777;
    margin-top: 5px;
}

.social-links-contact {
    margin-top: 30px;
    text-align: center; /* Center social links in info column */
}

.social-links-contact a {
    color: var(--dark-color);
    font-size: 1.8em;
    margin: 0 15px;
    transition: color 0.3s ease;
}

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

/* Contact Form */
.contact-form-container {
    background-color: var(--white);
    padding: 40px;
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.contact-form-container h3 {
    color: var(--primary-color);
    margin-bottom: 25px;
    font-size: 2em;
}

.contact-form-container p {
    margin-bottom: 20px;
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--dark-color);
    font-size: 0.95em;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    font-size: 1em;
    color: var(--text-color);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.contact-form textarea {
    resize: vertical; /* Allow vertical resizing */
    min-height: 120px;
}

.contact-form .btn {
    width: auto; /* Override general .btn width */
    padding: 12px 30px;
}

.form-note {
    font-size: 0.8em;
    color: #888;
    margin-top: 20px;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr; /* Stack columns on tablets/mobiles */
        gap: 40px;
    }
}

@media (max-width: 480px) {
    .contact-info, .contact-form-container {
        padding: 30px;
    }
    .contact-info h3, .contact-form-container h3 {
        font-size: 1.8em;
    }
    .info-item {
        margin-bottom: 20px;
    }
    .info-item i {
        font-size: 1.5em;
        margin-right: 15px;
    }
    .social-links-contact a {
        font-size: 1.5em;
        margin: 0 10px;
    }
}
/* Add to your existing css/style.css file */

/* Specialized Services Buttons Grid */
.specialized-services-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.service-btn {
    display: flex; /* Make the button content flex */
    align-items: center; /* Vertically center icon and text */
    justify-content: center; /* Horizontally center content */
    font-size: 1.1em;
    padding: 15px 25px;
    border: 2px solid var(--primary-color); /* Use secondary-btn style */
    color: var(--primary-color);
    background-color: var(--white);
    transition: all 0.3s ease;
    border-radius: 8px; /* Slightly more rounded */
    text-decoration: none; /* Remove underline */
}

.service-btn i {
    font-size: 1.5em; /* Larger icon */
    margin-right: 12px;
    color: var(--secondary-color); /* Icon color */
}

.service-btn:hover {
    background-color: var(--primary-color);
    color: var(--white);
    text-decoration: none;
    transform: translateY(-5px); /* Lift effect on hover */
}

.service-btn:hover i {
    color: var(--white); /* Change icon color on hover */
}

/* Ensure the note at the bottom is styled correctly */
.service-section .note {
    margin-top: 20px;
    font-size: 0.9em;
    color: var(--text-color);
    text-align: center;
}

/* Responsive adjustment for service buttons */
@media (max-width: 768px) {
    .specialized-services-buttons {
        grid-template-columns: 1fr; /* Stack buttons on smaller screens */
    }
}
/* Add to your existing css/style.css file */

/* General Styling for Service Detail Pages */
.service-detail-page-content {
    padding: 80px 0;
}

.detail-overview {
    text-align: center;
    margin-bottom: 60px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.detail-overview h3 {
    color: var(--primary-color);
    font-size: 2.2em;
    margin-bottom: 25px;
}

.detail-overview p {
    font-size: 1.05em;
    line-height: 1.7;
}

.detail-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.detail-feature-item {
    background-color: var(--white);
    padding: 30px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    text-align: center;
    transition: transform 0.3s ease;
}

.detail-feature-item:hover {
    transform: translateY(-5px);
}

.detail-feature-item i {
    font-size: 3em;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.detail-feature-item h4 {
    font-size: 1.4em;
    color: var(--dark-color);
    margin-bottom: 10px;
}

.detail-feature-item p {
    font-size: 0.9em;
    line-height: 1.6;
}

.detail-gallery {
    margin-bottom: 60px;
}

.detail-gallery h3 {
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 40px;
    font-size: 2.2em;
}

.detail-pricing-info {
    background-color: var(--light-color);
    border: 1px dashed var(--primary-color);
    border-radius: 10px;
    padding: 30px;
    margin-top: 40px;
}

.detail-pricing-info h3 {
    color: var(--primary-color);
    font-size: 1.8em;
    margin-bottom: 20px;
    text-align: center;
}

.detail-pricing-info p {
    font-size: 0.95em;
    margin-bottom: 15px;
}

.detail-pricing-info ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.detail-pricing-info ul li {
    background-color: var(--white);
    padding: 10px 15px;
    margin-bottom: 8px;
    border-left: 4px solid var(--accent-color);
    border-radius: 5px;
    font-size: 0.95em;
}

.detail-pricing-info .note {
    font-style: italic;
    font-size: 0.85em;
    text-align: center;
    color: var(--text-color);
    margin-top: 20px;
}

/* Responsive adjustments for service detail pages */
@media (max-width: 768px) {
    .service-detail-page-content {
        padding: 40px 0;
    }
    .detail-overview h3, .detail-gallery h3, .detail-pricing-info h3 {
        font-size: 1.8em;
    }
    .detail-features-grid {
        grid-template-columns: 1fr;
    }
}
.pricing-tiers-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 25px; 


    margin-top: 30px; 
    justify-content: center; /* Center cards if there are fewer */ 
} 
 
.pricing-tier-card { 
    background-color: var(--white); 
    border: 1px solid #eee; 
    border-radius: 10px; 
    box-shadow: var(--shadow); 
    padding: 30px; 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; /* Push button to bottom */ 
    transition: transform 0.3s ease, border-color 0.3s ease; 
} 
 
.pricing-tier-card:hover { 
    transform: translateY(-5px); 
    border-color: var(--primary-color); 
} 
 
.pricing-tier-card h4 { 
    color: var(--dark-color); 
    font-size: 1.4em; 
    margin-bottom: 10px; 
} 
 
.pricing-tier-card .price-display { 
    font-size: 1.8em; 
    font-weight: 700; 
    color: var(--primary-color); 
    margin-bottom: 15px; 
} 
 
.pricing-tier-card p { 
    font-size: 0.9em; 
    color: var(--text-color); 
    flex-grow: 1; /* Allows text to take up space, pushing button down 
*/ 
    margin-bottom: 25px; 
} 
 
.pricing-tier-card .btn { 
    width: 90%; /* Make button almost full width of card */ 
    margin-left: auto; 
    margin-right: auto; 
    padding: 10px 20px; 


    font-size: 1em; 
} 
 
/* Responsive adjustments for new pricing grid */ 
@media (max-width: 768px) { 
    .pricing-tiers-grid { 
        grid-template-columns: 1fr; 
    } 
} 
/* Add to your existing css/style.css file */

/* Important Note Section */
.important-note-section {
    background-color: #fff3cd; /* Light yellow background */
    border-left: 5px solid #ffc107; /* Yellow border */
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 60px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.important-note-section h3 {
    color: #856404; /* Dark yellow text */
    margin-bottom: 20px;
    font-size: 1.8em;
    display: flex;
    align-items: center;
}

.important-note-section h3 i {
    font-size: 1.5em;
    margin-right: 15px;
    color: #ffc107;
}

.important-note-section p {
    font-size: 1em;
    color: #665202;
    margin-bottom: 15px;
}

.important-note-section ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
}

.important-note-section ul li {
    font-size: 0.95em;
    color: #665202;
    margin-bottom: 8px;
    position: relative;
    padding-left: 25px; /* Space for custom bullet */
}

.important-note-section ul li::before {
    content: '\2022'; /* Unicode bullet point */
    color: #ffc107;
    font-weight: bold;
    display: inline-block;
    width: 1em; /* Space between bullet and text */
    margin-left: -1em; /* Negative margin to pull bullet left */
    position: absolute;
    left: 0;
}

.important-note-section .small-text {
    font-size: 0.85em;
    color: #856404;
    margin-top: 15px;
}

/* Specific styling for Emergency call buttons within pricing */
.pricing-tier-card .btn.primary-btn i.fas.fa-phone-alt {
    margin-right: 8px; /* Space out the phone icon */
}

/* Responsive adjustments for emergency section */
@media (max-width: 768px) {
    .important-note-section {
        padding: 20px;
    }
    .important-note-section h3 {
        font-size: 1.5em;
        flex-direction: column; /* Stack icon and text on small screens */
        text-align: center;
    }
    .important-note-section h3 i {
        margin-right: 0;
        margin-bottom: 10px;
    }
    .important-note-section ul li {
        padding-left: 20px;
    }
    .important-note-section ul li::before {
        left: 5px; /* Adjust bullet position */
    }
}
/* Add to your existing css/style.css file */

/* Make feature items clearly clickable */
.clickable-feature {
    cursor: pointer;
}

.clickable-feature:hover {
    transform: translateY(-5px) scale(1.02); /* More pronounced hover for interactivity */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
}


/* Universal Mini Pop-up Overlay (CRITICAL for clickable features) */
.mini-popup-overlay {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.mini-popup-content {
    background-color: var(--white);
    margin: 15% auto;
    padding: 30px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    position: relative;
    animation: fadeIn 0.3s ease-out;
}

.close-popup {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
}

.close-popup:hover,
.close-popup:focus {
    color: var(--primary-color);
    text-decoration: none;
}

.mini-popup-content h4 {
    color: var(--primary-color);
    font-size: 1.6em;
    margin-bottom: 15px;
}

.mini-popup-content p {
    font-size: 1.1em;
    line-height: 1.6;
    color: var(--text-color);
}

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

@media (max-width: 600px) {
    .mini-popup-content {
        width: 90%;
        margin: 10% auto;
        padding: 20px;
    }
    .mini-popup-content h4 {
        font-size: 1.4em;
    }
    .mini-popup-content p {
        font-size: 1em;
    }
}
/* Add to your existing css/style.css file */

/* Privacy Policy Content Section */
.privacy-policy-content {
    padding: 60px 0;
    line-height: 1.7;
    font-size: 1em;
    color: var(--text-color);
}

.privacy-policy-content h3 {
    color: var(--primary-color);
    margin-top: 35px;
    margin-bottom: 15px;
    font-size: 1.8em;
}

.privacy-policy-content ul {
    list-style: disc; /* Standard bullet points */
    margin-left: 25px;
    margin-bottom: 20px;
    font-size: 0.95em;
}

.privacy-policy-content ul li {
    margin-bottom: 8px;
}

.privacy-policy-content p {
    margin-bottom: 15px;
}

.privacy-policy-content strong {
    color: var(--dark-color);
}

.privacy-policy-content .effective-date {
    font-style: italic;
    text-align: right;
    margin-bottom: 30px;
    color: #666;
}

/* Responsive adjustments for privacy policy */
@media (max-width: 768px) {
    .privacy-policy-content {
        padding: 30px 0;
    }
    .privacy-policy-content h3 {
        font-size: 1.5em;
        margin-top: 25px;
    }
    .privacy-policy-content ul {
        margin-left: 15px;
    }
}
/* Ensure these styles are in your css/style.css file */

/* Make feature items clearly clickable */
.clickable-feature {
    cursor: pointer;
}

.clickable-feature:hover {
    transform: translateY(-5px) scale(1.02); /* More pronounced hover for interactivity */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
}


/* Mini Pop-up Overlay */
.mini-popup-overlay {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2000; /* Sit on top (higher than header) */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    backdrop-filter: blur(5px); /* Optional blur effect */
}

/* Mini Pop-up Content */
.mini-popup-content {
    background-color: var(--white);
    margin: 15% auto; /* 15% from the top and centered */
    padding: 30px;
    border: 1px solid #888;
    width: 80%; /* Could be more responsive */
    max-width: 500px; /* Max width for readability */
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    position: relative;
    animation: fadeIn 0.3s ease-out; /* Simple animation */
}

/* Close Button */
.close-popup {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
}

.close-popup:hover,
.close-popup:focus {
    color: var(--primary-color);
    text-decoration: none;
}

.mini-popup-content h4 {
    color: var(--primary-color);
    font-size: 1.6em;
    margin-bottom: 15px;
}

.mini-popup-content p {
    font-size: 1.1em;
    line-height: 1.6;
    color: var(--text-color);
}

/* Pop-up Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive adjustments for pop-up */
@media (max-width: 600px) {
    .mini-popup-content {
        width: 90%;
        margin: 10% auto;
        padding: 20px;
    }
    .mini-popup-content h4 {
        font-size: 1.4em;
    }
    .mini-popup-content p {
        font-size: 1em;
    }
}
/* Add to your existing css/style.css file */

/* Login Page Specific Styling */
.login-hero-section {
    background: url('../images/login-hero-bg.jpg') no-repeat center center/cover; /* New background image for login */
    position: relative;
    min-height: 100vh; /* Full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px; /* Add some padding for smaller screens */
}

.login-hero-overlay {
    background: rgba(0, 0, 0, 0.65); /* Darker overlay for contrast */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Use flex to center login container */
    align-items: center;
    justify-content: center;
}

.login-container {
    background-color: rgba(255, 255, 255, 0.95); /* Slightly transparent white */
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    padding: 40px;
    max-width: 450px; /* Max width for the login form */
    width: 100%; /* Occupy full width within max-width */
    text-align: center;
    transform: translateY(-20px); /* Slight lift for elegance */
    animation: fadeInSlideUp 0.8s ease-out forwards;
}

@keyframes fadeInSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.login-form-wrapper h3 {
    color: var(--primary-color);
    font-size: 2.2em;
    margin-bottom: 10px;
}

.login-form-wrapper .login-subtext {
    font-size: 1.1em;
    color: var(--text-color);
    margin-bottom: 30px;
}

.login-form .form-group {
    margin-bottom: 20px;
    text-align: left; /* Align labels/inputs left */
}

.login-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--dark-color);
    font-size: 0.95em;
}

.login-form input[type="email"],
.login-form input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    font-size: 1em;
    color: var(--text-color);
    background-color: var(--white);
}

.login-form input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.login-btn {
    width: 100%; /* Make button full width */
    font-size: 1.1em;
    padding: 15px;
    margin-top: 10px;
}

.form-link-text {
    margin-top: 20px;
    font-size: 0.95em;
    color: var(--text-color);
}

.form-link-text a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.form-link-text a:hover {
    text-decoration: underline;
}

.form-message {
    margin-top: 15px;
    font-weight: 600;
}

/* Hide header for this specific full-height page to avoid double header */
.login-hero-section + header {
    display: none;
}

/* Adjust general body margin/padding if you typically have a body offset for the header */
body {
    padding-top: 0; /* Remove any top padding if header is fixed */
}

/* Responsive adjustments for login page */
@media (max-width: 600px) {
    .login-container {
        margin: 20px; /* Reduce margin on small screens */
        padding: 30px 20px;
    }
    .login-form-wrapper h3 {
        font-size: 1.8em;
    }
    .login-form-wrapper .login-subtext {
        font-size: 1em;
    }
    .login-btn {
        padding: 12px;
        font-size: 1em;
    }
}
/* Add to your existing css/style.css file */

/* Dashboard Specific Styling */
.dashboard-hero-section {
    background: url('../images/dashboard-hero-bg.jpg') no-repeat center center/cover; /* Dashboard specific background */
    position: relative;
    min-height: 350px; /* Reduced height for dashboard hero */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    padding: 20px;
}

.dashboard-hero-overlay {
    background: rgba(0, 0, 0, 0.5); /* Slightly lighter overlay */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-hero-overlay h2 {
    font-size: 3em;
    margin-bottom: 10px;
    color: var(--white);
}

.dashboard-hero-overlay .dashboard-subtext {
    font-size: 1.2em;
    color: rgba(255, 255, 255, 0.9);
}

.dashboard-content {
    padding: 60px 20px;
    background-color: var(--light-color);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.dashboard-card {
    background-color: var(--white);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* For rounded corners on status bar */
}

.dashboard-card .card-header {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-card .card-header h3 {
    color: var(--white);
    font-size: 1.4em;
    margin: 0;
    display: flex;
    align-items: center;
}

.dashboard-card .card-header h3 i {
    margin-right: 10px;
    font-size: 1.2em;
}

.dashboard-card .card-status {
    background-color: #00bfff; /* Secondary color for status */
    color: var(--white);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
}

.dashboard-card .card-content {
    padding: 25px;
    flex-grow: 1; /* Allows content area to fill space */
}

.dashboard-card .card-content p {
    font-size: 0.95em;
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: 10px;
}

.dashboard-card .card-content p:last-child {
    margin-bottom: 0;
}

.dashboard-card .card-content strong {
    color: var(--dark-color);
}

/* Specific styling for the large service history card */
.dashboard-card.large-card {
    grid-column: 1 / -1; /* Spans all columns in grid */
}

.dashboard-card .service-entry {
    background-color: #f8f8f8;
    border-left: 4px solid var(--secondary-color);
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.dashboard-card .service-entry em {
    font-size: 0.85em;
    color: #666;
}

.dashboard-card .view-all-link {
    font-size: 0.9em;
    padding: 8px 15px;
    border-radius: 20px; /* More rounded button */
}

.dashboard-cta-bottom {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #ddd;
}

.dashboard-cta-bottom p {
    font-size: 1.1em;
    color: var(--dark-color);
    margin-bottom: 25px;
}

/* Adjustments for dashboard on smaller screens */
@media (max-width: 768px) {
    .dashboard-hero-overlay h2 {
        font-size: 2.2em;
    }
    .dashboard-hero-overlay .dashboard-subtext {
        font-size: 1em;
    }
    .dashboard-content {
        padding: 40px 15px;
    }
    .dashboard-grid {
        grid-template-columns: 1fr; /* Stack cards vertically */
    }
    .dashboard-card.large-card {
        grid-column: auto; /* Remove span for stacking */
    }
}
/* Add to your existing css/style.css file */

/* Admin Login Page Specific Styling */
.admin-login-hero-section {
    background: url('../images/admin-login-hero-bg.jpg') no-repeat center center/cover; /* Specific admin background */
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.admin-login-hero-overlay {
    background: rgba(0, 0, 0, 0.75); /* Darker overlay for admin security feel */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Reusing .login-container and .login-form-wrapper for consistency */
/* Specific overrides for admin if needed */
.login-container h3 { /* Admin login title */
    color: var(--secondary-color); /* Use a different accent color for admin */
    font-size: 2.5em;
    margin-bottom: 10px;
}

.login-form-wrapper .login-subtext {
    font-size: 1em;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 30px;
}

.login-form label i { /* Icons for form labels */
    margin-right: 8px;
    color: var(--primary-color);
}

.otp-group label i {
    color: var(--accent-color); /* Green for security */
}

/* QR Code Setup Area */
#qrCodeSetup {
    background-color: #f0f8ff; /* Light blue background */
    border: 1px dashed var(--primary-color);
    border-radius: 10px;
    padding: 25px;
}

#qrCodeSetup h4 {
    color: var(--dark-color);
    font-size: 1.4em;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#qrCodeSetup h4 i {
    margin-right: 10px;
    color: var(--accent-color);
}

.qr-code-display {
    padding: 10px;
    background-color: var(--white);
    border: 1px solid #ddd;
    border-radius: 8px;
}

#qrCodeImage {
    display: block; /* Ensure image behaves as a block */
    margin: 0 auto;
}

#manualAuthKey {
    font-family: 'monospace';
    font-size: 1.1em;
    background-color: #eee;
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block; /* Allow padding */
    margin-top: 5px;
}

#rescanQrBtn {
    margin-top: 15px;
}

/* Adjustments for general form messages */
.form-message {
    font-weight: 600;
    margin-top: 15px;
}

/* Hide header for this specific full-height page to avoid double header */
.admin-login-hero-section + header {
    display: none;
}

/* Adjust general body margin/padding if you typically have a body offset for the header */
body {
    padding-top: 0;
}

/* Responsive adjustments for admin login */
@media (max-width: 600px) {
    .login-container {
        margin: 15px;
        padding: 25px;
    }
    .login-form-wrapper h3 {
        font-size: 2em;
    }
    .login-subtext {
        font-size: 0.9em;
    }
    .login-btn {
        padding: 12px;
        font-size: 1em;
    }
    #qrCodeSetup {
        padding: 20px;
    }
}
/* Add to your existing css/style.css file */

/* Design Builder Specific Styling */
.design-intro-section {
    padding: 80px 0;
    text-align: center;
    background-color: var(--white);
}

.design-intro-section .detail-overview h3 {
    color: var(--primary-color);
    margin-bottom: 25px;
    font-size: 2.2em;
}

.design-intro-section .detail-overview p {
    font-size: 1.05em;
    line-height: 1.7;
    max-width: 900px;
    margin: 0 auto 15px auto;
}

.design-steps-section {
    padding: 80px 0;
    text-align: center;
    background-color: var(--light-color);
}

.design-steps-section h3 {
    color: var(--primary-color);
    margin-bottom: 40px;
    font-size: 2.2em;
}

/* Reusing detail-features-grid and detail-feature-item for consistency */

.design-builder-placeholder {
    padding: 80px 0;
    background-color: var(--white);
    text-align: center;
}

.design-builder-placeholder h3 {
    color: var(--primary-color);
    font-size: 2.2em;
    margin-bottom: 20px;
}

.builder-form-area {
    max-width: 700px;
    margin: 0 auto;
    padding: 30px;
    background-color: #fbfdff; /* Lightest blue background */
    border-radius: 12px;
    box-shadow: var(--shadow);
    text-align: left; /* Align form elements left */
}

/* Reusing .contact-form styles for form fields and buttons */
.builder-form-area .form-message {
    margin-top: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .design-intro-section, .design-steps-section, .design-builder-placeholder {
        padding: 40px 0;
    }
    .design-steps-section h3, .design-builder-placeholder h3 {
        font-size: 1.8em;
    }
    .builder-form-area {
        margin: 0 15px;
        padding: 20px;
    }
}

/* Suggested Applications of --new-accent-gray: */

/* For subtle borders on cards or sections */
.service-card, .feature-item, .plan-card, .dashboard-card, .pricing-tier-card, .gallery-item {
    border: 1px solid var(--new-accent-gray); /* Add a subtle border */
}

/* For lighter section backgrounds (if you want more variation than --light-color) */
/* You could apply this to specific sections, e.g.,
.design-intro-section {
    background-color: var(--new-accent-gray);
}
*/

/* For the form messages (making them softer) */
.form-message {
    color: var(--dark-color); /* Darker for better visibility */
    background-color: var(--new-accent-gray); /* Subtle background for messages */
    padding: 8px 15px;
    border-radius: 5px;
    border: 1px solid darken(var(--new-accent-gray), 10%); /* Slightly darker border */
}

/* For table borders in admin/customer dashboard for a softer look */
.admin-table th, .admin-table td {
    border: 1px solid var(--new-accent-gray); /* Use the new gray for table borders */
}
.pricing-tier-card {
    border: 1px solid var(--new-accent-gray); /* Use the new gray for pricing card borders */
}

/* You could also subtly adjust shadows or text colors, but start simple to see the effect */

/* Pool Intro Section on Homepage */
.pool-intro-section {
    background-color: var(--mid-gray-background); /* Using mid-gray for contrast */
    padding: 80px 0;
}

.pool-content-wrapper {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}

.pool-text {
    flex: 1;
    min-width: 300px;
}

.pool-text h3 {
    color: var(--primary-color);
    font-size: 2.2em;
    margin-bottom: 20px;
}

.pool-text p {
    font-size: 1.1em;
    line-height: 1.7;
    margin-bottom: 30px;
}

.pool-image {
    flex: 1;
    min-width: 300px;
    text-align: center;
}

/* Style for both Pool and Pond intro images on the homepage */
.pool-image img,
.ponds-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: var(--shadow);
}

/* Responsive adjustments for pools intro */
@media (max-width: 768px) {
    .pool-intro-section {
        padding: 60px 0;
    }
    .pool-content-wrapper {
        flex-direction: column;
        text-align: center;
    }
    .pool-text h3 {
        font-size: 1.8em;
    }
}

/* New style for the currently viewed page link */
nav ul li a.active2 {
    color: #808080; /* Gray text */
}

/* New style for the underline on the currently viewed page link */
nav ul li a.active2::after {
    background-color: #808080; /* Gray underline */
}

/* ADD THIS TO THE END OF STYLE.CSS */

/* Advanced Customer Dashboard */
.dashboard-content .container {
    max-width: 1400px;
}

.tank-selector-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tank-selector-group label {
    font-weight: 600;
    font-size: 1.1em;
}

#tankSelector {
    padding: 8px 12px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1em;
    font-family: 'Poppins', sans-serif;
}

.dashboard-main-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 30px;
    grid-template-areas:
        "chart chart sub"
        "details history history";
}

.dashboard-chart-card { grid-area: chart; }
.dashboard-subscription-card { grid-area: sub; }
.dashboard-details-card { grid-area: details; }
.dashboard-history-card { grid-area: history; }

.dashboard-info-card {
    background-color: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 25px;
    display: flex;
    flex-direction: column;
}

.dashboard-info-card h4 {
    color: var(--primary-color);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.chart-container {
    position: relative;
    height: 400px;
}

.subscription-tier {
    font-size: 2em;
    font-weight: 700;
    color: var(--accent-color);
    text-align: center;
    margin: 20px 0;
}

.dashboard-details-list p {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}
.dashboard-details-list p:last-child {
    border-bottom: none;
}

/* Responsive Grid for Dashboard */
@media (max-width: 1200px) {
    .dashboard-main-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "chart chart"
            "sub details"
            "history history";
    }
}
@media (max-width: 768px) {
    .dashboard-main-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "chart"
            "sub"
            "details"
            "history";
    }
    .chart-container {
        height: 300px;
    }
}
/* Trusted Partners Section */
.partners-section {
    padding: 80px 0;
    background-color: var(--light-color);
    text-align: center;
}

.partners-section h3 {
    color: var(--primary-color);
    margin-bottom: 40px;
    font-size: 2.2em;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.partner-card {
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 25px;
    transition: transform 0.3s ease;
}

.partner-card:hover {
    transform: translateY(-10px);
}

.partner-card img.partner-logo {
    max-width: 100%;
    height: 80px; /* Consistent logo height */
    object-fit: contain; /* Prevents stretching */
    margin-bottom: 20px;
}

.partner-card h5 {
    color: var(--dark-color);
    font-size: 1.5em;
    margin-bottom: 10px;
}

.partner-card p {
    font-size: 0.95em;
    color: var(--text-color);
    min-height: 50px;
}
/* Ad Page Preview Controls */
.preview-controls {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.preview-controls .btn {
    background-color: var(--white);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}
.preview-controls .btn.active {
    background-color: var(--primary-color);
    color: var(--white);
}
.preview-window {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
}
.code-block {
    background-color: #2d2d2d;
    color: #f8f8f2;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    text-align: left;
    margin-top: 10px;
}
.code-block-wrapper h4 {
    margin-top: 20px;
    text-align: left;
}
/* --- UPDATES FOR ADVERTISING SECTION --- */

/* This makes the double-wide card span two columns */
.partner-card-double {
    grid-column: span 2;
    /* Optional: align content differently for the wider card */
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: left;
    padding: 20px 30px;
}

.partner-card-double .partner-logo {
    margin-right: 25px;
    margin-bottom: 0;
    flex-shrink: 0; /* Prevents logo from shrinking */
}

/* This makes the full buyout card span all three columns */
.partner-card-full {
    grid-column: span 3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    padding: 20px 40px;
}

.partner-card-full .partner-logo {
    margin-right: 30px;
    margin-bottom: 0;
    height: 100px; /* Make logo bigger for full buyout */
}

.partner-card-full .partner-info {
    max-width: 60%;
}
/* Pricing Toggle Switch */
.pricing-toggle {
    text-align: center;
    margin-bottom: 30px;
}
.pricing-toggle .toggle-btn {
    padding: 10px 20px;
    border: 1px solid var(--primary-color);
    background-color: var(--white);
    color: var(--primary-color);
    cursor: pointer;
    font-weight: 600;
}
.pricing-toggle .toggle-btn:first-of-type {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.pricing-toggle .toggle-btn:last-of-type {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: none;
}
.pricing-toggle .toggle-btn.active {
    background-color: var(--primary-color);
    color: var(--white);
}

/* --- Modern Footer Enhancements --- */
.footer-column .footer-links {
    list-style: none;
    padding: 0;
}

.footer-column .footer-links li a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease, padding-left 0.3s ease;
    display: inline-block; /* Allows for padding effect */
}

.footer-column .footer-links li a:hover {
    color: var(--secondary-color);
    padding-left: 5px; /* Adds a nice hover effect */
    text-decoration: none;
}

.footer-bottom a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: underline;
}

.footer-bottom a:hover {
    color: var(--white);
}
/* --- Business Intro Section on Homepage --- */
.business-intro-section {
    padding: 80px 0;
}
.business-content-wrapper {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}
.business-text {
    flex: 1;
    min-width: 300px;
}
.business-text h3 {
    color: var(--primary-color);
    font-size: 2.2em;
    margin-bottom: 20px;
}
.business-text p {
    font-size: 1.1em;
    line-height: 1.7;
    margin-bottom: 30px;
}
.business-image {
    flex: 1;
    min-width: 300px;
    text-align: center;
}
.business-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: var(--shadow);
}

@media (max-width: 768px) {
    .business-intro-section { padding: 60px 0; }
    .business-content-wrapper { flex-direction: column-reverse; text-align: center; }
    .business-text h3 { font-size: 1.8em; }
}
/* --- Pond Plan Dropdown Pricing Styles --- */
.pond-pricing-selector {
    margin-top: 15px;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pond-pricing-selector label {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--dark-color);
}
.pond-pricing-selector select {
    width: 100%;
    max-width: 300px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-family: 'Poppins', sans-serif;
    font-size: 1em;
}
.pond-pricing-selector .price-display {
    margin-top: 15px;
    font-size: 1.8em !important; /* Use important to override other styles if needed */
}
.pricing-tier-card .price-display.hidden-price {
    display: none; /* Hide the default price display */
}

/* ========== START: FINAL HEADER & MENU CSS ========== */

/* --- Main Header Structure (Applies to both Desktop and Mobile Base) --- */
header {
    background-color: var(--mid-gray-background);
    box-shadow: var(--shadow);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    min-height: 90px; /* Increased height to accommodate logo and text */
}

/* --- Header Center Content (Logo & Title - Desktop Stacked) --- */
/* This section explicitly sets the stacked behavior for desktop */
.header-center-content {
    display: flex;
    flex-direction: column; /* CRITICAL: Stack logo and H1 vertically on desktop */
    align-items: center; /* Center them horizontally */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    text-align: center; /* Ensure text is centered below logo */
}
.header-center-content a {
    text-decoration: none;
    display: flex;
    flex-direction: column; /* Ensure the link itself also stacks its contents */
    align-items: center;
    color: var(--dark-color);
}
.header-center-content img {
    height: 60px; /* Adjusted desktop logo size */
    margin-right: 0; /* No right margin, as it's stacked */
    margin-bottom: 5px; /* Space between logo and text */
}
.header-center-content h1 {
    font-size: 1.6em; /* Desktop H1 size */
    margin: 0;
    white-space: nowrap; /* Keep text on one line */
    overflow: hidden; /* Hide overflow if too long */
    text-overflow: ellipsis; /* Add ellipsis if hidden */
}

/* --- Desktop Navigation Styles (Specific to Desktop) --- */
.desktop-nav {
    display: flex; /* Always display flex on desktop */
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.nav-links { /* Apply to both left-nav and right-nav if they are separate lists */
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-links li {
    margin: 0 12px;
}
.nav-links a {
    color: var(--dark-color);
    font-weight: 600;
    text-decoration: none;
    padding: 30px 0; /* Vertical padding to make links vertically centered in header */
    position: relative;
    white-space: nowrap;
}
.nav-links a:hover {
    color: var(--primary-color);
}
.dropdown {
    position: relative;
}
.dropdown-toggle .fa-chevron-down {
    font-size: 0.7em;
    margin-left: 4px;
}
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    box-shadow: var(--shadow);
    list-style: none;
    padding: 10px 0;
    margin-top: 0; /* CRITICAL FIX: Changed from -15px to 0 */
    border-radius: 5px;
    z-index: 1001;
}
.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-menu a {
    padding: 8px 20px;
}
.menu-toggle {
    display: none; /* Hidden on desktop */
}

/* --- Mobile-Specific Styles (Apply ONLY when screen <= 1024px) --- */
@media (max-width: 1024px) {
    .desktop-nav {
        display: none; /* Hide desktop nav on mobile */
    }

    /* Main Site Header (mobile view - Hamburger button, logo, title alignment) */
    header .container {
        justify-content: space-between; /* Space out items */
        align-items: center;
        padding-top: 10px;
        padding-bottom: 10px;
        min-height: 80px; /* Ensure sufficient height for hamburger + logo/title */
    }
    .header-center-content {
        position: static; /* Remove absolute positioning */
        transform: none;
        order: 2; /* Visual order: center */
        flex-grow: 1; /* Allow to take available space */
        text-align: center; /* Center content horizontally */
        margin: 0 auto; /* Center the element itself */
    }
    .header-center-content a {
        flex-direction: column; /* Stack logo and title */
        align-items: center;
        text-align: center;
        padding: 0;
    }
    .header-center-content img {
        height: 55px; /* Slightly larger main site logo on mobile */
        margin-right: 0;
        margin-bottom: 5px;
    }
    .header-center-content h1 {
        font-size: 1.2em; /* Adjusted font size for mobile title */
        white-space: normal; /* Allow text wrapping */
        line-height: 1.2;
    }

    .menu-toggle {
        display: block; /* Show hamburger menu */
        order: 3; /* Visual order: right */
        font-size: 2.5em; /* Make hamburger button larger */
        color: var(--dark-color);
        background: none;
        border: none;
        cursor: pointer;
        padding: 0 10px; /* Add padding to hamburger touch area */
    }
    /* If you have nav-left/nav-right directly in header.container (for positioning hamburger) */
    header .nav-links.left-nav, header .nav-links.right-nav {
        order: 1; /* Visual order: left */
        flex-grow: 1;
        display: flex; /* Ensure they are flex containers to push other elements */
        justify-content: flex-start; /* Align content to start */
        align-items: center;
        padding: 0 10px;
    }
    /* Hide desktop nav links when mobile menu is closed (if not already handled) */
    header nav ul.nav-links {
        display: none;
    }


    /* NEW: Mobile-only Auth Bar Styles (visible only on mobile) */
    .mobile-auth-bar {
        display: block; /* Show the bar on mobile */
        background-color: var(--mid-gray-background);
        padding: 8px 0;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        position: sticky;
        top: 0; /* Sticks to the top of the viewport when scrolled */
        z-index: 999;
        width: 100%;
        transition: transform 0.3s ease-in-out;
        border-bottom: 1px solid var(--light-border-gray);
    }

    .mobile-auth-bar .container {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .mobile-auth-bar .mobile-auth-btn {
        /* Display is controlled by JS for conditional visibility */
        justify-content: center;
        align-items: center;
        padding: 10px 15px;
        font-size: 0.9em;
        border-radius: 20px;
        box-shadow: none;
        transition: all 0.2s ease;
        flex-grow: 1;
        max-width: 48%; /* Limit growth so two fit per row */
        text-align: center;
    }
    .mobile-auth-bar .mobile-auth-btn:hover {
        transform: translateY(-1px);
    }

    /* Primary/secondary button base styles are already defined globally. */
}

/* Hide mobile-auth-bar on desktop */
@media (min-width: 1025px) {
    .mobile-auth-bar {
        display: none !important; /* CRITICAL: Hide on desktop */
    }
}


/* --- Mobile Menu Overlay Styles (FINAL FIX for Height/Scrollbar) --- */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Set collapsed height to 43% of viewport height */
    height: 43vh !important; /* CRITICAL: Force this height with !important */
    max-height: 100vh; /* Ensure it never exceeds viewport height */
    background-color: var(--light-color);
    z-index: 2000;
    transform: translateX(-100%);
    /* Transition for transform (slide) and height for smooth open/close */
    transition: transform 0.4s ease-in-out, height 0.3s ease-out;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.3);
    overflow-y: auto; /* CRITICAL: Always allow scrolling within the overlay if content overflows */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px; /* Add some padding at the bottom of the overlay itself */
}

/* Custom Scrollbar Styling (for Webkit browsers like Chrome, Safari, Edge) */
.mobile-menu-overlay::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}
.mobile-menu-overlay::-webkit-scrollbar-track {
    background: var(--new-accent-gray); /* Track background */
    border-radius: 10px;
}
.mobile-menu-overlay::-webkit-scrollbar-thumb {
    background: var(--primary-color); /* Thumb color */
    border-radius: 10px;
}
.mobile-menu-overlay::-webkit-scrollbar-thumb:hover {
    background: #0056b3; /* Darker thumb on hover */
}
/* For Firefox, you might need to add: scrollbar-color: var(--primary-color) var(--new-accent-gray); to .mobile-menu-overlay */


.mobile-menu-overlay.open {
    transform: translateX(0%);
    /* When open, its height will be set by JavaScript to content height or 100vh max */
    /* This rule itself doesn't control height directly anymore, JS does this. */
    /* The transition property for height is on the base .mobile-menu-overlay rule. */
}

/* Header within the overlay */
.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--mid-gray-background);
    border-bottom: 1px solid var(--light-border-gray);
    flex-shrink: 0;
    min-height: 100px; /* Header height (to fit larger logo_two) */
}

.mobile-menu-header a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    text-align: center;
}
.mobile-menu-header img {
    height: 70px; /* Larger logo in overlay */
    width: auto;
    margin-bottom: 5px;
}
.mobile-menu-header h1 {
    font-size: 1.1em;
    color: var(--dark-color);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-close-btn {
    background: none;
    border: none;
    font-size: 2.2em;
    color: var(--dark-color);
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
}
.menu-close-btn:hover {
    transform: rotate(90deg);
    color: var(--primary-color);
}

/* Links container within the overlay */
.mobile-menu-links {
    padding: 20px;
    flex-grow: 1; /* Allow this section to take available space */
    height: auto; /* Let content dictate height */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 0;
}

/* Ensure the <nav> element for main links is always displayed */
.mobile-menu-links nav {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
    width: 100%;
}

.mobile-menu-links .mobile-main-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
    width: 100%;
}

/* Styling for Main Navigation Items (Pill/Circle Buttons) */
.mobile-menu-links .mobile-main-nav > li {
    margin-bottom: 10px; /* Space between main nav buttons */
    border-bottom: none !important; /* CRITICAL: Remove the unwanted border here */
    box-shadow: none !important; /* CRITICAL: Remove any unwanted shadow from li */
    background-color: transparent !important; /* Ensure no background on LI itself */
}

/* This is the key element for the "pill buttons" */
.mobile-menu-links .mobile-main-nav > li > a {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 15px 20px;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--primary-color);
    background-color: var(--white);
    border: 2px solid var(--primary-color);
    border-radius: 30px; /* Pill shape */
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 100%;
    text-align: center;
}

.mobile-menu-links .mobile-main-nav > li > a:hover {
    background-color: var(--primary-color);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

/* Icon styling within main nav buttons */
.mobile-menu-links .mobile-main-nav > li > a i.fas:not(.fa-chevron-down) {
    margin-right: 8px;
    font-size: 1.2em;
    color: var(--dark-color); /* Adjusted: Make normal icon color dark gray/black */
}
.mobile-menu-links .mobile-main-nav > li > a:hover i.fas:not(.fa-chevron-down) {
    color: var(--white);
}

/* Accordion Toggle Arrow (only for dropdowns) */
.mobile-accordion-toggle {
    position: relative;
    padding-right: 40px !important;
}
.mobile-accordion-toggle .fa-chevron-down {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    font-size: 1em;
    color: var(--dark-color); /* Adjusted: Make dropdown arrow dark gray/black */
    transition: transform 0.3s ease, color 0.3s ease;
}
.mobile-accordion-item.open .mobile-accordion-toggle .fa-chevron-down {
    transform: translateY(-50%) rotate(180deg);
    color: var(--primary-color); /* Keep primary color when open */
}
.mobile-accordion-toggle:hover .fa-chevron-down {
    color: var(--white); /* Change to white on hover of parent button */
}

/* Sub-Menu Styling (for dropdown items) */
.mobile-sub-menu {
    list-style: none;
    padding: 0; /* CRITICAL: Padding is 0 when collapsed */
    background-color: var(--new-accent-gray);
    border-radius: 20px;
    margin-top: 8px;
    margin-bottom: 10px;
    max-height: 0; /* Starts collapsed, controlled by JS for height transitions */
    transition: max-height 0.3s ease-out, padding 0.3s ease-out; /* CRITICAL: Transition padding */
    overflow: hidden; /* Hide overflow content during transitions */
    box-shadow: inset 0 0 5px rgba(0,0,0,0.15);
    display: block; /* Keep display: block for max-height transition to work */
}

.mobile-sub-menu li {
    margin-bottom: 5px;
}
.mobile-sub-menu li:last-child {
    margin-bottom: 0;
}

.mobile-sub-menu li a {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 10px 15px !important;
    font-size: 0.95em !important;
    font-weight: 500 !important;
    color: var(--dark-color);
    background-color: transparent;
    border: 1px solid var(--light-border-gray);
    border-radius: 25px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.mobile-sub-menu li a:hover {
    background-color: var(--white);
    color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.mobile-menu-separator {
    display: none; /* Removed as mobile-user-links is now outside overlay */
}