*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Reset some basic styles */
body, h1, h2, h3, h4, p, ul, li, figure, figcaption, blockquote, dl, dd {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Example: Using Inter, a nice sans-serif. Add @import in HTML or here if using Google Fonts */
    line-height: 1.6;
    color: #333; /* Default text color */
    background-color: #f7f9fc; /* Light off-white/blueish background for the page body */
    font-size: 16px;
}

.container {
    width: 90%;
    max-width: 1100px; /* Max width for content */
    margin: 0 auto; /* Centering */
    padding: 20px 0; /* Padding top/bottom for sections */
}

/* Header Styles */
header.main-header {
    background-color: #fff;
    padding: 10px 0; /* Adjusted padding */
    border-bottom: 1px solid #e0e0e0;
    position: sticky; /* Optional: make header sticky */
    top: 0;
    z-index: 999;
    /* margin-bottom: 30px; /* Remove this if main content has its own top margin */
}

header.main-header .header-container { /* Use this specific class for header's container */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

header.main-header .logo img {
    max-height: 50px; /* Adjust as needed for your logo size */
    width: auto;
    display: block; /* Removes extra space below image */
}
/* If you have .site-name-text: */
/* header.main-header .logo .site-name-text { font-size: 1.5em; color: #005F60; font-weight: bold; margin-left: 10px; } */


nav.main-nav {
    display: flex;
    align-items: center;
}

nav.main-nav .nav-links {
    list-style: none;
    display: flex;
    margin: 0; /* Reset margin for ul */
    padding: 0; /* Reset padding for ul */
}

nav.main-nav .nav-links li {
    margin-left: 25px; /* Spacing between nav items */
}

nav.main-nav .nav-links li a {
    text-decoration: none;
    color: #008083; /* Medium Teal */
    font-weight: 500;
    padding: 8px 10px; /* Adjust padding */
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap; /* Prevent links from wrapping */
}
nav.main-nav .nav-links li a:hover,
nav.main-nav .nav-links li a.active { /* .active class set by PHP */
    background-color: #e0f7fa; /* Light teal background on hover/active */
    color: #005F60; /* Dark Teal */
}

nav.main-nav .nav-cta-button-desktop {
    margin-left: 30px; /* Space between links and button */
}
nav.main-nav .nav-cta-button-desktop .button-primary {
    padding: 8px 18px; /* Slightly smaller button for nav */
    font-size: 0.9em;
}

nav.main-nav .nav-cta-button-mobile {
    display: none; /* Hidden on desktop */
    margin-top: 20px; /* Space above it in mobile menu */
    padding: 0 20px; /* Add some padding if it's full width */
}
nav.main-nav .nav-cta-button-mobile .button-primary {
    width: 100%; /* Make it full width */
    text-align: center;
    padding: 15px; /* Larger padding for mobile */
    font-size: 1.1em;
}

/* Mobile Navigation Toggle (Hamburger Icon) */
.mobile-nav-toggle {
    display: none; /* Hidden by default, shown in media query */
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    z-index: 1001; /* Above nav when closed */
}
.mobile-nav-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 3px;
    background-color: #005F60; /* Dark Teal for hamburger lines */
    margin: 4px 0;
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hamburger animation to X when active/open */
.mobile-nav-toggle.active .icon-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
	background-color: white;
}
.mobile-nav-toggle.active .icon-bar:nth-child(2) {
    opacity: 0;
}
.mobile-nav-toggle.active .icon-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
	background-color: white;
}


/* Responsive Header - Mobile View */
@media (max-width: 992px) { /* Adjust breakpoint as needed */
    header.main-header .header-container {
        /* Logo on left, hamburger on right */
    }

    nav.main-nav {
        position: fixed; /* Or absolute if header isn't sticky */
        top: 0; /* Or top: header height if header isn't sticky */
        left: 0;
        width: 100%;
        height: 100vh; /* Full screen overlay */
        background-color: rgba(0, 95, 96, 0.98); /* Dark Teal with slight transparency */
        flex-direction: column;
        justify-content: center; /* Center items vertically */
        align-items: center;
        transform: translateX(-100%); /* Hidden off-screen to the left */
        transition: transform 0.3s ease-in-out;
        padding-top: 60px; /* Space for close button or header */
        z-index: 1000;
    }

    nav.main-nav.open {
        transform: translateX(0); /* Slide in */
    }

    nav.main-nav .nav-links {
        flex-direction: column; /* Stack links vertically */
        text-align: center;
        width: 100%;
    }

    nav.main-nav .nav-links li {
        margin: 0; /* Reset margin */
        width: 100%;
    }

    nav.main-nav .nav-links li a {
        display: block; /* Make links full width */
        padding: 20px; /* Larger tappable area */
        font-size: 1.2em;
        color: #fff; /* White text on dark background */
        border-bottom: 1px solid rgba(250, 171, 54, 0.2); /* Separator */
    }
    nav.main-nav .nav-links li a:hover,
    nav.main-nav .nav-links li a.active {
        background-color: #F78104; /* Secondary Orange for active/hover in mobile menu */
        color: #fff;
    }
    nav.main-nav .nav-links li:last-child a {
        border-bottom: none;
    }

    /* "Take the Survey" button moved into the mobile menu */
    nav.main-nav .nav-cta-button-desktop {
        display: none; /* Hide the desktop version */
    }
    /* We'll add the CTA button inside the mobile nav's ul or after it via JS/PHP */
    /* For now, let's assume it's manually added to main_header.php inside the nav for mobile */


    .mobile-nav-toggle {
        display: block; /* Show hamburger button */
    }
	
	nav.main-nav .nav-cta-button-desktop {
        display: none; /* Hide desktop button on mobile */
    }
    nav.main-nav .nav-cta-button-mobile {
        display: block; /* Show mobile button in nav */
    }
}

/* Buttons */
.button-primary {
    background-color: #FD5901; /* Primary Orange */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-block; /* Allows margin and padding */
}
.button-primary:hover {
    background-color: #F78104; /* Secondary Orange */
}

.button-secondary {
    background-color: #008083; /* Primary Teal/Blue */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-block;
}
.button-secondary:hover {
    background-color: #3DC1B1; /* Medium Teal/Blue */
}


/* Footer (consistent across pages) */
footer.main-footer {
    background-color: #005F60; /* Dark Teal */
    color: #e0f7fa; /* Light teal text */
    text-align: center;
    padding: 30px 0;
    margin-top: 50px;
    font-size: 0.9em;
}
footer.main-footer .container {
    padding-top:0; padding-bottom:0;
}
footer.main-footer a {
    color: #FAAB36; /* Accent Orange/Yellow for links */
    text-decoration: none;
}
footer.main-footer a:hover {
    text-decoration: underline;
}
footer.main-footer p {
    margin-bottom: 10px;
}
footer.main-footer .footer-links span {
    margin: 0 10px;
}

footer.main-footer .digigee {
	color: #FFFFFF50;
}

footer.main-footer .digigee a:hover {
    text-decoration: none;
	color: #FFFFFF80;
}


/* Utility classes */
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }

/* Specific section styling - we'll add this per page */

/* Homepage Specific Styles */
        .hero-section {
            text-align: center;
            padding: 40px 20px; /* More padding */
            /* background-color: #fff; */ /* White background for this section */
            /* border-radius: 8px;*/
            /* margin-bottom: 40px; */
        }
        .hero-section h1 {
            font-size: 2.6em; /* Larger heading */
            color: #005F60; /* Dark Teal */
            margin-bottom: 20px;
            font-weight: 700;
        }
		
		.hero-section h2 {
            font-size: 2.4em; /* Larger heading */
            color: #005F60; /* Dark Teal */
            margin-bottom: 20px;
            font-weight: 700;
        }
		
        .hero-section .subheadline {
            font-size: 1.6em;
            color: #008083;
            max-width: 800px;
            margin: 0 auto 30px auto;
            line-height: 1.7;
			font-weight: 600;
        }
		
		.hero-section .subheadline-two {
            font-size: 1.2em;
            color: #555;
            max-width: 900px;
            margin: 0 auto 30px auto;
            line-height: 1.7;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
            gap: 30px;
            margin-bottom: 50px;
        }
        .feature-card {
            background-color: #fff;
            padding: 30px;
            border-radius: 12px; /* More rounded */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            text-align: left; /* Icons might be centered or left */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
        }
        .feature-card .icon { /* This class already existed */
			/*margin-bottom: 20px; */ /* Increased space below icon */
			/* text-align: center; /* If you want the icon itself centered within this div */
			/* If you want the icon div itself to be a certain size and centered: */
			/* display: flex;
			justify-content: center;
			align-items: center;
			width: 60px; /* Example size for the icon container */
			/* height: 60px; */
			/* background-color: #e0f7fa; /* Optional light teal circle behind icon */
			/* border-radius: 50%; */
			/* margin-left: auto; */
			/* margin-right: auto; */
		}

		.feature-icon { /* New class for the SVG element itself */
			width: 48px;  /* Equivalent to Tailwind's w-12 (w-6 is 24px, let's make them bigger) */
			height: 48px; /* Equivalent to Tailwind's h-12 */
			stroke: #FAAB36; /* Accent Orange/Yellow for the stroke (lines) */
							 /* For SVGs with fill="currentColor", this will be overridden by 'color' */
			color: #FAAB36;  /* For SVGs that use fill="currentColor" or if you want to control fill via color */
		}
		
		.feature-card:nth-child(2) .feature-icon { 
			stroke: #008083;
			color: #008083; 
			transform: rotate(135deg);
			}
			
		.feature-card:nth-child(3) .feature-icon { 
			stroke: #FD5901; 
			color: #FD5901; 
			}

			/* If you want different colors for different icons, you can target them specifically */
			/* For example, if you add an ID or another class to the specific SVG */
			/* .feature-card:nth-child(1) .feature-icon { stroke: #FD5901; color: #FD5901; }
			.feature-card:nth-child(2) .feature-icon { stroke: #3DC1B1; color: #3DC1B1; }
			.feature-card:nth-child(3) .feature-icon { stroke: #008083; color: #008083; } */
		
        .feature-card h3 {
            font-size: 1.4em;
            color: #005F60; /* Dark Teal */
            margin-bottom: 10px;
            font-weight: 600;
        }
        .feature-card p {
            font-size: 0.95em;
            color: #444;
            line-height: 1.6;
        }

        .cta-section {
            background-color: #e0f7fa; /* Very light teal background */
            padding: 50px 20px;
            text-align: center;
            border-radius: 8px;
        }
        .cta-section .badge {
            display: inline-block;
            background-color: #FAAB36;
            color: #fff;
            padding: 5px 12px;
            border-radius: 12px;
            font-size: 0.8em;
            font-weight: 600;
            margin-bottom: 15px;
            text-transform: uppercase;
        }
        .cta-section h2 {
            font-size: 2.2em;
            color: #005F60; /* Dark Teal */
            margin-bottom: 15px;
            font-weight: 700;
        }
        .cta-section .price-info {
            font-size: 1.1em;
            color: #008083; /* Medium Teal */
            margin-bottom: 30px;
			margin-left: auto;
			margin-right: auto;
			max-width: 800px;	
        }
        .cta-section .button-primary { /* Main CTA button */
            font-size: 1.2em;
            padding: 15px 40px;
            background-color: #FD5901; /* Primary Orange */
        }
        .cta-section .button-primary:hover {
            background-color: #F78104; /* Secondary Orange */
        }
		

/* End Homepage Specific Styles */

/* Registration Specific Styles */

.registration-form-container {
        max-width: 600px; /* Or your preferred width for forms */
        margin: 30px auto; /* Center the form container */
        padding: 30px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    }
    .registration-form-container h1 {
        text-align: center;
        color: #005F60; /* Dark Teal */
        margin-bottom: 25px;
        font-size: 1.8em;
    }
    .registration-form-container p.intro-text {
        text-align: center;
        margin-bottom: 25px;
        color: #555;
        font-size: 1.05em;
    }
    .form-group { margin-bottom: 20px; } /* Increased spacing */
    .form-group label {
        display: block;
        margin-bottom: 8px; /* More space for label */
        font-weight: 600; /* Make labels a bit bolder */
        color: #333;
    }
    .form-group input[type="text"],
    .form-group input[type="email"] {
        width: 100%;
        padding: 12px; /* Increased padding */
        border: 1px solid #ccc; /* Slightly darker border */
        border-radius: 6px; /* Consistent with buttons */
        box-sizing: border-box;
        font-size: 1em;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .form-group input[type="text"]:focus,
    .form-group input[type="email"]:focus {
        border-color: #FD5901; /* Primary Orange on focus */
        box-shadow: 0 0 0 3px rgba(253, 89, 1, 0.2); /* Subtle focus ring */
        outline: none;
    }

    .error-messages-box { /* Styling for the error messages block */
        background-color: #f8d7da; /* Light red */
        color: #721c24; /* Dark red text */
        border: 1px solid #f5c6cb;
        padding: 15px;
        border-radius: 6px;
        margin-bottom: 20px;
    }
    .error-messages-box strong { display: block; margin-bottom: 5px; }
    .error-messages-box ul { list-style-position: inside; padding-left: 0; margin-top: 5px;}
    .error-messages-box ul li { margin-bottom: 3px;}


    #checkout-button { /* Already in style.css as .button-primary or .button-stripe */
        /* If it was .button-stripe, ensure it aligns with .button-primary */
        width: 100%; /* Make button full width within its container */
        font-size: 1.1em;
        margin-top: 10px; /* Reduced top margin as it's inside form group */
    }

/* End Registration Specific Styles */


/* Styles for survey.php and survey_engine.php */

.survey-card-container {
    max-width: 700px; /* A bit wider for survey intro/engine */
    margin: 40px auto;
    padding: 35px 40px; /* More padding */
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.09);
    text-align: center; /* Center content within the card */
}

.survey-card-container h1,
.survey-card-container h2 {
    color: #005F60; /* Dark Teal */
    margin-bottom: 20px;
}

.survey-card-container p {
    color: #444;
    font-size: 1.05em;
    line-height: 1.7;
    margin-bottom: 15px;
}

.survey-card-container .start-survey-button { /* For the button on survey.php */
    margin-top: 30px;
    padding: 15px 40px; /* Larger button */
    font-size: 1.1em;
}

/* Styles specific to survey_engine.php will follow */

/* Styles for survey_engine.php */

.survey-engine-content { /* Wrapper for the whole survey engine interface */
    /* Uses .survey-card-container for basic card styling */
    text-align: left; /* Override centered text for questions */
}

/* Progress Bar */
.progress-bar-container {
    width: 100%;
    background-color: #e9ecef; /* Lighter grey */
    border-radius: 25px; /* More rounded */
    margin-bottom: 30px;
    padding: 3px; /* Small padding to see border */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.progress-bar {
    background-color: #008083; /* Primary Teal/Blue */
    height: 20px;
    border-radius: 22px; /* Keep it rounded inside */
    text-align: center;
    line-height: 20px;
    color: white;
    font-size: 0.85em;
    font-weight: 600;
    transition: width 0.4s ease-out; /* Smooth progress animation */
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide text if bar too small */
}

/* Question Area */
.question-wrapper { /* Wrapper for question number, text, and options */
    margin-bottom: 30px;
    padding: 20px;
    background-color: #fdfdfd; /* Very light off-white for question box */
    border: 1px solid #e7e7e7;
    border-radius: 8px;
}

.question-number {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 8px;
    font-weight: 500;
}

.question-text {
    font-size: 1.25em; /* Larger question text */
    color: #333;
    margin-bottom: 25px;
    line-height: 1.5;
    font-weight: 600; /* Make question stand out */
}

/* Radio Button Options Styling */
.answer-options {
    /* No specific wrapper style needed unless you want a border around all options */
}

.answer-options label {
    display: block; /* Make each label a block for full-width click */
    background-color: #fff;
    border: 1px solid #d1d5db; /* Light grey border */
    padding: 15px 20px;
    margin-bottom: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    font-size: 1em;
    color: #454545;
    position: relative; /* For custom radio button indicator if added */
}

.answer-options label:hover {
    border-color: #FAAB36; /* Accent Orange/Yellow on hover */
    background-color: #fffaf0; /* Very light orange tint */
}

.answer-options input[type="radio"] {
    margin-right: 12px;
    vertical-align: middle;
    /* Consider hiding default radio and styling a custom one if you want full control */
    /* For now, let's style the default a bit */
    transform: scale(1.2); /* Slightly larger radio */
    accent-color: #FD5901; /* Primary Orange for the radio dot */
}

.answer-options input[type="radio"]:focus + span { /* If you wrap label text in <span> */
    /* Add focus style to label text */
}
.answer-options input[type="radio"]:checked + label, /* This doesn't work as label is parent */
/* We'll use JS to add a class to the label when its radio is checked if needed for more styling */
/* Or simply rely on the accent-color for the radio itself */

.answer-options label.checked-label { /* Add this class via JS if you want to style the selected label */
    border-color: #FD5901;
    background-color: #fff3e0; /* Lighter Primary Orange background */
    font-weight: 600;
    color: #FD5901;
}

/* Animation/Loader for between questions and for report generation */
.loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent white overlay */
    z-index: 10; /* Above the content */
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    flex-direction: column; /* To stack spinner and text */
    border-radius: 12px; /* Match parent card's border-radius */
    cursor: wait;
}

.loader-overlay.active {
    display: flex; /* Show it when active */
}

.loader-spinner {
    border: 6px solid #f3f3f3; /* Light grey */
    border-top: 6px solid #FD5901; /* Primary Orange */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

/* For the report loader, we'll add text below */
.loader-overlay .loader-text {
    margin-top: 20px;
    font-size: 1.1em;
    color: #005F60; /* Dark Teal */
    font-weight: 500;
}


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* We need to make the parent container position-relative for the absolute overlay to work */
.survey-card-container {
    position: relative; /* Add this to your existing .survey-card-container style */
}

/* Navigation Buttons */
.navigation-buttons {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.navigation-buttons .button-primary, /* Next/Finish */
.navigation-buttons .button-secondary { /* Previous */
    padding: 12px 30px;
    font-size: 1.05em;
}

/* Styles for report.php */

.report-page-container { /* Main wrapper for report content if needed, often just .container is fine */
    /* No specific styles here yet, but can be used for overall report page structure */
}

.report-header-section {
    padding: 20px;
    background-color: #f8f9fa; /* Light grey for a subtle intro box */
    border-radius: 8px;
    margin-bottom: 30px;
    border: 1px solid #e9ecef;
}
.report-header-section h1 { /* For "Report for: User Name" */
    font-size: 1.8em;
    color: #005F60; /* Dark Teal */
    margin-bottom: 8px;
}
.report-header-section p {
    font-size: 1em;
    color: #555;
    margin-bottom: 5px;
}

/* General Section Styling for Report Parts */
.report-section {
    background-color: #fff;
    padding: 25px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
    margin-bottom: 35px;
}
.report-section h2.section-title-report { /* For titles like "Segment Performance Overview" */
    font-size: 1.6em;
    color: #005F60; /* Dark Teal */
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #3DC1B1; /* Primary Teal/Blue border */
}
.report-section h3.subsection-title-report { /* For "Segment Scores", "Segment Insights" */
    font-size: 1.4em;
    color: #008083; /* Medium Teal */
    margin-top: 25px; /* Space above if multiple subsections */
   
   margin-bottom: 15px;
}

p.segment-explanation-text {
    font-size: 0.95em;
    color: #444;
    line-height: 1.6;
	margin-bottom: 25px;
}



/* Chart Area */
.chart-container-report { /* Wrapper for the canvas */
	width: 100%;
    max-width: 700px;
    margin: 0 auto 30px auto;
    padding: 15px;
    /* border: 1px solid #e0e0e0; */
    /* border-radius: 8px; */
    /* background-color: #fdfdfd; */
    /* Add a specific height or min-height here */
    height: 400px; /* Example: Fixed height */
    /* Or for more flexibility: */
    /* min-height: 400px; */
}
#segmentChart { /* The canvas itself */
    /* max-height: 400px;  */ /* Prevent chart from becoming too tall */
}

/* Segment Scores Table */
.report-table { /* Already defined in previous response, ensure it's in style.css */
    width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
    font-size: 0.95em;
}
.report-table th, .report-table td {
    border: 1px solid #d1d5db;
    padding: 10px 12px;
    text-align: left;
}
.report-table th {
    background-color: #e9ecef; /* Light grey header */
    color: #333;
    font-weight: 600;
	text-align: center;
}
.report-table td:nth-child(2) { /* Score column */
    text-align: center;
    font-weight: 500;
	text-align: center;
}
.report-table td:nth-child(3) { /* Interpretation column */
    text-align: center;
    font-weight: 500;
	text-align: center;
}

/* Segment Insights & Recommendations (Grouped by Level) */
.recommendation-group-report { /* Wrapper for each level group */
    margin-bottom: 25px;
    padding-bottom: 15px;
    /* border-bottom: 1px dashed #ccc; */ /* Optional separator */
}
.recommendation-group-report:last-child {
    border-bottom: none;
}
.recommendation-group-report h2.level-title-report { /* "Excellent", "Good", etc. */
    font-size: 1.5em;
    color: #FD5901; /* Primary Orange for level titles */
    margin-bottom: 15px;
    /* border-left: 4px solid #FD5901;
    padding-left: 10px; */
}
.recommendation-group-report .segment-insight { /* Wrapper for each segment within a level */
    margin-bottom: 20px;
    padding-left: 15px; /* Indent segment details under level */
    border-left: 3px solid #FAAB36; /* Accent orange left border */
}
.recommendation-group-report .segment-insight h3.segment-name-title { /* Segment Name */
    font-size: 1.2em;
    color: #008083; /* Medium Teal */
    margin-bottom: 5px;
    font-weight: 600;
}
.recommendation-group-report .segment-insight p.segment-recommendation-text {
    font-size: 0.95em;
    color: #444;
    line-height: 1.6;
}




/* User/Manager Focus Areas */
.focus-areas-report {
    margin-top: 10px; /* Space from the main section title */
}
.focus-areas-report h2.focus-title-report { /* "User Focus Areas", "Manager Focus Areas" */
    font-size: 1.5em;
    color: #FD5901; /* Primary Orange */
    margin-bottom: 20px;
}
.focus-areas-report .segment-focus { /* Wrapper for each segment in focus areas */
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 3px solid #FAAB36;
}
.focus-areas-report .segment-focus h3.segment-name-focus { /* Segment name */
    font-size: 1.2em;
    color: #008083; /* Medium Teal */
    margin-bottom: 8px;
    font-weight: 600;
}
.focus-areas-report .segment-focus ul {
    list-style: disc;
    margin-left: 20px; /* Indent list items */
    padding-left: 0;
}
.focus-areas-report .segment-focus ul li {
    margin-bottom: 8px;
    font-size: 0.95em;
    color: #444;
    line-height: 1.6;
}

/* PDF Download Button */
.pdf-download-section {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
}
.pdf-download-section .button-primary {
    font-size: 1.1em;
    padding: 15px 35px;
}


/* Footer Logo */
footer.main-footer .footer-container {
    /* Uses existing .container for width and centering */
}
footer.main-footer .footer-content-wrapper {
    display: flex;
    flex-direction: column; /* Stack on small screens */
    align-items: center;
    justify-content: space-between;
    text-align: center;
}
footer.main-footer .footer-logo-container {
    margin-bottom: 20px;
}
footer.main-footer .footer-logo-container img {
    max-height: 40px; /* Adjust footer logo size */
    width: auto;
}
footer.main-footer .footer-info {
	
    /* Text is already centered by footer.main-footer */
}

footer.main-footer .footer-info p:last-child {
	margin-top: 20px;
	margin-bottom: 0;
}



@media (min-width: 768px) { /* For tablet and up */
    footer.main-footer .footer-content-wrapper {
        flex-direction: row; /* Logo left, info right */
        text-align: left;
    }
    footer.main-footer .footer-logo-container {
		margin-bottom: 0;
        margin-right: 20px; /* Space between logo and text */
    }
	footer.main-footer .footer-logo-container img {
		transform: translateY(-20px);
	}
    footer.main-footer .footer-info {
		padding-top: 35px;
        text-align: right; /* Align text info to the right */
    }
	
}



/* Basic styling for static content pages */
    .content-page {
        background-color: #fff;
        padding: 25px 30px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06);
        margin-top: 30px; /* If header doesn't have margin-bottom */
    }
    .content-page h1 {
        font-size: 2em;
        color: #005F60;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }
    .content-page h2 {
        font-size: 1.5em;
        color: #008083;
        margin-top: 30px;
        margin-bottom: 15px;
    }
    .content-page h3 {
        font-size: 1.2em;
        color: #249EA0;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .content-page p {
        margin-bottom: 15px;
        line-height: 1.7;
    }
    .content-page ul {
        margin-bottom: 15px;
        list-style-position: outside;
        padding-left: 25px; /* Indent list items */
    }
    .content-page ul li {
        margin-bottom: 8px;
    }
    .content-page a {
        color: #FD5901; /* Primary Orange for links */
        text-decoration: none;
    }
    .content-page a:hover {
        text-decoration: underline;
    }
	
	/* Styles specific to how-it-works.php or can be moved to a shared content_page.css */
    .content-page-container { /* General wrapper for static content pages */
        max-width: 900px; /* Slightly wider for more text */
        margin: 40px auto;
        padding: 30px 40px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.07);
    }

    .content-page-container h1.page-main-title {
        font-size: 2.2em;
        color: #005F60; /* Dark Teal */
        text-align: center;
        margin-bottom: 30px;
        padding-bottom: 15px;
        border-bottom: 2px solid #FAAB36; /* Accent Orange/Yellow */
    }

    .content-page-container h2.section-heading {
        font-size: 1.7em;
        color: #008083; /* Medium Teal */
        margin-top: 40px;
        margin-bottom: 20px;
        padding-bottom: 8px;
        border-bottom: 1px solid #e0e0e0;
    }
    .content-page-container h2.section-heading:first-of-type {
        margin-top: 0; /* No top margin for the very first h2 */
    }


    .content-page-container p, .content-page-container ul {
        font-size: 1.05em; /* Slightly larger for readability */
        color: #333;
        line-height: 1.75;
        margin-bottom: 20px;
    }

    .content-page-container .quote {
        font-style: italic;
        color: #555;
        margin: 25px 0;
        padding-left: 20px;
        border-left: 3px solid #FAAB36; /* Accent Orange/Yellow */
    }
    .content-page-container .quote footer { /* For quote attribution */
        font-style: normal;
        font-size: 0.9em;
        color: #777;
        text-align: right;
        margin-top: 5px;
    }

    .content-page-container strong {
        font-weight: 600;
        color: #005F60; /* Dark Teal for emphasis */
    }

    .content-page-container ul.checklist {
        list-style: none;
        padding-left: 0;
    }
    .content-page-container ul.checklist li {
        padding-left: 40px;
        position: relative;
        margin-bottom: 12px;
    }
	
	.content-page-container ul.checklist li .checklist-icon {
		position: absolute;
		left: 0;
		/* top: 0; */ /* Align to the top of the line */
		width: 30px; /* Adjust size as needed */
		height: 30px; /* Adjust size as needed */
		color: #FAAB36; /* Primary Teal/Blue for the icon */
		/* If you have Tailwind CSS loaded, you could use a class like `text-teal-500` instead of `color`. */
	}
	
    .content-page-container .cta-button-section {
        text-align: center;
        margin-top: 40px;
        padding-top: 30px;
        border-top: 1px solid #eee;
    }
    .content-page-container .cta-button-section .button-primary {
        font-size: 1.15em;
        padding: 15px 35px;
    }