/* --- Root Variables for Global Styles --- */
:root {
    /* Color Palette */
    --bg-dark: #0A0A0A; /* Very dark background, almost black */
    --bg-medium: #131313; /* Slightly lighter background for sections */
    --text-primary: #F0F0F0; /* Light text for readability on dark backgrounds */
    --text-secondary: #B0B0B0; /* Slightly muted text for less emphasis */
    --accent-blue: #00BFFF; /* Your current primary blue accent */
    --accent-purple: #8A2BE2; /* A complementary purple for gradients/highlights */
    --gradient-start: #00BFFF; /* Start of your main gradient */
    --gradient-end: #8A2BE2; /* End of your main gradient */
    --card-bg: rgba(255, 255, 255, 0.07); /* Background for cards/info boxes */
    --border-light: rgba(255, 255, 255, 0.1); /* Light border for subtle separation */

    /* Typography */
    --font-main: 'Poppins', sans-serif;
    --heading-font-weight: 600;
    --body-font-weight: 400;

    /* Spacing */
    --spacing-xs: 10px;
    --spacing-sm: 20px;
    --spacing-md: 40px;
    --spacing-lg: 80px;
    --spacing-xl: 120px;

    /* Border Radius */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 50px; /* For buttons/pills */

    /* Transitions */
    --transition-speed: 0.3s;
    --transition-timing: ease-in-out;
}

html, body {
            overflow-x: clip;
        }

    body {
        min-height: 100vh;
        background: linear-gradient(to bottom, #00000f, #00001c 70%, #24214f);
        position: relative;
        font-family: var(--font-main);
        color: #fff;
    }

    /*------------------------------
      Content & About Page CSS
    ------------------------------*/
    main {
        padding-top: clamp(80px, 6vw, 90px);
    }

    .content {
        position: relative;
        z-index: 1;
        max-width: 100%;
    }

    .hero-section {
        text-align: center;
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .hero-section .container {
        max-width: clamp(400px, 60vw, 90vw);
        margin: 0 auto;
    }


    .hero-section h1 {
        font-size: clamp(2rem, 8vw, 4rem);
        font-weight: bold;
        text-transform: uppercase;
        position: relative;
        display: inline-block;
        line-height: 1.1;
        margin: 0;
        padding: min(20px);
    }

    .hero-section h1 span {
        display: block;
        position: relative;
    }

    .hero-section h2 {
    font-size: clamp(1.1rem, 3vw, 1.8rem); /* Slightly larger and clearer sub-heading */
    display: inline-block;
    padding: var(--spacing-xs);
    text-align: center;
    font-weight: var(--body-font-weight);
    color: var(--text-secondary); /* Muted for subtext */
    max-width: 800px; /* Constrain width of subheading */
    margin-top: var(--spacing-sm);
}

/* About Content Section */
.about-content {
    padding: clamp(1rem, 2vw, 2rem);
    display: flex;
    flex-direction: column; /* Stacks rows vertically on all screen sizes by default */
    gap: var(--spacing-lg); /* Gap between the main rows */
    max-width: 1200px;
    margin: 0 auto;
}

.about-section-card {
    padding: var(--spacing-md);
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-section-card:hover {
    transform: translateY(-5px);
}

.about-section-card h3 {
    font-size: clamp(1.4rem, 2.5vw, 2rem); /* Larger headings for sections */
    margin-bottom: var(--spacing-sm);
    color: var(--accent-blue); /* Use accent color for section headings */
    font-weight: var(--heading-font-weight);
    text-align: center; /* Center these main section headings */
}

.about-section-card p {
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    line-height: 1.7;
    margin-bottom: var(--spacing-xs); /* Use variable for paragraph spacing */
    color: var(--text-secondary);
}


/* Philosophy Section */
.philosophy {
    /* Will be wrapped in .about-section-card */
    text-align: left; /* Keep text aligned left */
    max-width: 900px; /* Allow wider text for philosophy */
    margin: 0 auto; /* Center philosophy text block */
}

/* 5-Step Process (now within a .about-section-card) */
.process-steps { /* Renamed for clarity */
    /* This content will also be inside an .about-section-card */
}

.process-steps ul {
    list-style: none; /* Remove default disc */
    padding-left: 0;
    display: grid; /* Use grid for layout */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
    gap: var(--spacing-sm); /* Gap between list items */
    text-align: center; /* Center individual steps */
}

.process-steps ul li {
    background-color: rgba(255, 255, 255, 0.05); /* Lighter background for each step */
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: clamp(0.9rem, 1.6vw, 1rem);
    line-height: 1.5;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background-color 0.3s ease;
}

.process-steps ul li:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.process-steps ul li strong {
    color: var(--accent-blue); /* Highlight step titles */
    font-weight: var(--heading-font-weight);
    display: block; /* Make strong text a block for spacing */
    margin-bottom: 5px;
    font-size: clamp(1rem, 2vw, 1.1rem);
}

/* Unique Value (now within a .about-section-card) */
.unique-value {
    /* Will be wrapped in .about-section-card */
    max-width: 900px; /* Allow wider text for unique value */
    margin: 0 auto; /* Center unique value text block */
}

/* Team Member */
.team-member {
    background-color: var(--card-bg); /* Consistent background */
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    text-align: center;
    margin: 0 auto; /* Center the team member card */
    max-width: 450px; /* Adjust max-width for better portrait aspect */
    border: 1px solid var(--border-light);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-member:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 191, 255, 0.3);
}


.team-member img {
    width: clamp(180px, 20vw, 250px); /* Slightly smaller portrait size */
    height: clamp(180px, 20vw, 250px);
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: var(--spacing-sm);
    border: 3px solid var(--accent-blue); /* Add a subtle border */
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.3); /* Glow around image */
}

.team-member h3 {
    font-size: clamp(1.4rem, 3vw, 1.8rem); /* Name more prominent */
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
    font-weight: var(--heading-font-weight);
}

.team-member p { /* For "Founder, Developer" */
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    font-weight: var(--body-font-weight);
}

.team-member .bio-text { /* New class for the biographical text */
    text-align: left;
    font-weight: var(--body-font-weight); /* Use body font weight */
    font-size: clamp(0.9rem, 1.7vw, 1.05rem);
    line-height: 1.7;
    padding: var(--spacing-xs);
    color: var(--text-secondary);
}

/* Call to Action */
.call-to-action {
    background-color: var(--card-bg); /* Consistent background */
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    max-width: 800px; /* Limit width */
    margin: var(--spacing-lg) auto; /* More space before/after */
    text-align: center;
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.call-to-action h3 { /* If you decide to add a heading here */
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin-bottom: var(--spacing-sm);
    color: var(--accent-blue);
    font-weight: var(--heading-font-weight);
}

.call-to-action p {
    font-size: clamp(1rem, 2vw, 1.2rem); /* Make CTA text slightly larger */
    line-height: 1.6;
    margin: var(--spacing-sm) 0;
    color: var(--text-secondary);
}

.call-to-action a {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.call-to-action a:hover {
    color: var(--accent-blue);
}

/* Media Queries */
/* Media Queries */
@media (min-width: 769px) {
    /* Main .about-content remains column to stack the rows */
    .about-content {
        align-items: center; /* Center the rows within the main content area */
    }

    /* Containers for the two rows of content */
    .top-about-row,
    .bottom-about-row {
        display: flex;
        flex-direction: row; /* Make items in these rows go side-by-side */
        gap: var(--spacing-lg); /* Gap between cards within each row */
        width: 100%; /* Take full width of parent (about-content) */
        max-width: 1200px; /* Match max-width of about-content */
        align-items: stretch; /* Make cards in the row have equal height */
    }

    .top-about-row {
        margin-bottom: var(--spacing-lg); /* Space between the two main rows */
    }

    /* Specific flex sizing for the top row (Philosophy and Why Choose RavenVista) */
    .philosophy,
    .unique-value {
        flex: 1 1 50%; /* Each takes roughly half the width */
        max-width: calc(50% - var(--spacing-lg) / 2); /* Account for the gap */
    }

    /* Specific flex sizing for the bottom row (Team Member and 5-Step Process) */
    .team-member,
    .process-steps {
        flex: 1 1 50%; /* Each takes roughly half the width */
        max-width: calc(50% - var(--spacing-lg) / 2); /* Account for the gap */
    }

    /* Optional: Order the items within their rows if needed.
       In this case, their order in HTML will naturally place them correctly. */
}

@media (max-width: 768px) {
    /* On smaller screens, these rows will naturally stack due to .about-content's flex-direction: column */
    /* And individual cards will take full width */
    .philosophy,
    .unique-value,
    .team-member,
    .process-steps {
        flex: 1 1 100%; /* Ensure they take full width on mobile */
        max-width: 100%;
        margin-top: 40px;
    }
    .team-member .bio-text {
        font-size: clamp(0.9rem, 2vw, 1.1rem);
    }
}