/* assets/css/about-styles.css */

/* --- Base Styles & Variables --- */
:root {
    --primary-color: #0056b3; /* A slightly darker, more luxurious blue */
    --secondary-color: #6c757d;
    --text-color: #343a40; /* Dark text for contrast */
    --light-bg: #f8f9fa; /* Subtle light background for sections */
    --white: #ffffff;
    --dark-overlay: rgba(0, 0, 0, 0.6); /* Darker overlay for text readability on images */
    --border-radius-base: 12px; /* Slightly larger border-radius for modern feel */
    --transition-speed: 0.4s; /* Slower transition for a smoother effect */
    --section-spacing: 100px; /* Consistent vertical spacing for sections */
    --box-shadow-light: 0 5px 20px rgba(0, 0, 0, 0.08); /* Subtle shadow for blocks */
    --box-shadow-hover: 0 15px 40px rgba(0, 0, 0, 0.15); /* More pronounced shadow on hover */
}

body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.8;
    color: var(--text-color);
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0.5em;
    line-height: 1.2;
}

h1 { font-weight: 800; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }

p {
    margin-bottom: 1em;
    font-weight: 300; /* Lighter weight for prose for modern look */
}

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

a:hover {
    color: #003f8c; /* Manually darkened version of --primary-color */
    text-decoration: underline;
}

/* Reusable Utility Classes */
.section-padded {
    padding: var(--section-spacing) 0;
}

.container {
    max-width: 1200px; /* Wider container for more content space */
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.bg-light { background-color: var(--light-bg); }
.bg-primary { background-color: var(--primary-color); }
.text-white { color: var(--white); }
.rounded { border-radius: var(--border-radius-base); }

/* Bootstrap-like margin/padding classes */
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mb-md-0 { margin-bottom: 0 !important; }
.mt-4 { margin-top: 1.5rem !important; }

.img-fluid {
    max-width: 100%;
    height: auto;
}

/* --- Page Structure & Layout --- */

.content-wrapper {
    /* REMOVED: margin-top: -80px; to prevent overlapping issues */
    margin-top: 0; /* Ensures content starts below the hero */
    padding-top: var(--section-spacing); /* Add top padding to the content area */
    position: relative;
    z-index: 2; /* Ensure content is above the hero image */
}

.block-item {
    margin-bottom: 40px; /* Spacing between main content blocks */
    border-radius: var(--border-radius-base);
    overflow: hidden; /* For any internal elements */
}

.block-item:not(.bg-light) {
    background-color: var(--white);
}

/* Hero Section: Full-width image with overlaid text */
.hero-full-image {
    position: relative;
    width: 100%;
    height: 650px; /* Fixed height for the hero section */
    overflow: hidden; /* Crucial to contain the image */
    display: flex;
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
    text-align: center;
}

.hero-full-image .hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire area */
    z-index: 0; /* Place image behind overlay */
}

.hero-full-image .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--dark-overlay); /* Dark overlay for text readability */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1; /* Place overlay above image */
    color: var(--white);
}

.hero-full-image h1 {
    font-size: 5.5em; /* Larger, impactful title */
    margin-bottom: 25px;
    font-weight: 800;
    letter-spacing: -2px;
    color: var(--white);
    text-shadow: 0 5px 20px rgba(0,0,0,0.5); /* Stronger shadow for pop */
}

.hero-full-image .lead {
    font-size: 2.2em; /* Larger lead text */
    font-weight: 300;
    max-width: 900px;
    margin: 0 auto;
    opacity: 0.95;
    line-height: 1.5;
}

/* Section Titles (Common style for all h2 section headers) */
.section-title {
    font-size: 3.8em;
    color: var(--text-color);
    margin-bottom: 50px;
    font-weight: 700;
    position: relative;
    display: flex; /* Use flexbox to align content */
    align-items: center; /* Vertically center icon with text */
    justify-content: center; /* Horizontally center the entire title block */
    padding-bottom: 20px; /* Space for underline */
    text-align: center; /* Ensure text alignment for browsers that might not perfectly center flex items due to text-align property */
}

/* Style for icons within section titles */
.section-icon {
    font-size: 0.8em; /* Make icon slightly smaller than text */
    margin-right: 15px; /* Space between icon and text */
    color: var(--primary-color); /* Color the icon with primary color */
}


.section-title::after {
    content: '';
    display: block;
    width: 80px; /* Longer underline */
    height: 5px; /* Thicker underline */
    background-color: var(--primary-color);
    margin: 20px auto 0;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}

/* Introduction Section */
/* The h2 in introduction-section is a very long sentence.
    While flexbox will center the entire h2 block, the text wrapping
    within that h2 will still align to its left by default.
    If you want the text content of this *specific* h2 to also be centered
    when it wraps to multiple lines, you can uncomment text-align: center here.
*/
.introduction-section h2 {
    /* text-align: center; */ /* Uncomment if the long H2 text needs internal centering too */
    font-size: 2.5em; /* Adjust font size for this specific long H2 */
}
.introduction-section .lead {
    font-size: 1.5em;
    line-height: 1.8;
    color: var(--secondary-color);
    font-weight: 400;
}

/* Statistics Section */
.statistics-section .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; /* Space between stat items */
}

.statistics-section .col-lg-3,
.statistics-section .col-md-4,
.statistics-section .col-sm-6 {
    /* To control width when not using full Bootstrap grid responsiveness for custom gap */
    flex: 0 0 auto;
    max-width: 280px; /* Limit individual item width */
}

.stat-item {
    padding: 30px 20px;
    background-color: var(--white);
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-light);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    height: 100%; /* Ensure all items are same height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.stat-item:hover {
    transform: translateY(-10px);
    box-shadow: var(--box-shadow-hover);
}

.stat-number {
    font-size: 3.8em; /* Larger numbers */
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 10px;
    line-height: 1;
}

.stat-label {
    font-size: 1.1em;
    color: var(--secondary-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    text-align: center;
}

/* General Content Sections (Story, Expertise, Commitment, Why Thailand) */
/* Shared paragraph styling for better readability and luxury feel */
.story-section p,
.expertise-section p,
.commitment-section p,
.why-thailand-section p {
    font-size: 1.15em;
    line-height: 1.9;
    color: var(--text-color);
    margin-bottom: 25px;
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 300;
}

/* Our Values Section */
.values-section .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; /* Space between value items */
}

.values-section .col-md-3,
.values-section .col-sm-6 {
    flex: 0 0 auto;
    max-width: 280px; /* Limit width for consistency */
}

.value-item {
    background-color: var(--white);
    padding: 35px 25px;
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-light);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.value-item:hover {
    transform: translateY(-10px);
    box-shadow: var(--box-shadow-hover);
}

.value-icon {
    font-size: 4.2em;
    color: var(--primary-color);
    margin-bottom: 20px;
    line-height: 1;
}

.value-item h3 {
    font-size: 1.8em;
    color: var(--text-color);
    margin-bottom: 15px;
    font-weight: 700;
}

.value-item p {
    font-size: 1em;
    color: var(--secondary-color);
    line-height: 1.8;
    text-align: center;
    max-width: 100%;
    font-weight: 300;
}

/* Contact Section */
.contact-section .contact-details p {
    font-size: 1.2em;
    font-weight: 400;
}

.contact-section .contact-details a {
    font-weight: 600;
}

/* Footer Section */
.site-footer {
    background-color: var(--text-color); /* Dark footer */
    color: var(--white);
    padding: 30px 0;
}

.site-footer .copyright-text {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.7);
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
}

@media (max-width: 991px) {
    :root {
        --section-spacing: 80px;
    }
    .hero-full-image {
        height: 550px;
    }
    .hero-full-image h1 {
        font-size: 4.5em;
    }
    .hero-full-image .lead {
        font-size: 1.8em;
    }
    .content-wrapper {
        padding-top: var(--section-spacing); /* Ensure padding for responsive */
    }
    .section-title {
        font-size: 3em;
        margin-bottom: 40px;
    }
    .section-title::after {
        width: 60px;
        height: 4px;
    }
    .section-icon {
        font-size: 0.7em; /* Smaller icon on medium screens */
        margin-right: 10px;
    }
    .statistics-section .col-lg-3,
    .statistics-section .col-md-4,
    .statistics-section .col-sm-6 {
        width: 48%; /* Two columns on medium screens */
        max-width: none; /* Remove max-width to allow flexible sizing */
    }
    .values-section .col-md-3,
    .values-section .col-sm-6 {
        width: 48%; /* Two columns on medium screens */
        max-width: none;
    }
}

@media (max-width: 767px) {
    :root {
        --section-spacing: 60px;
    }
    .hero-full-image {
        height: auto; /* Allow height to adapt based on content and padding */
        min-height: 350px; /* Set a suitable minimum height for mobile */
        padding: 60px 20px; /* Adjust padding for mobile to give breathing room */
        display: flex;
        flex-direction: column; /* Stack content vertically */
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .hero-full-image .hero-image {
        /* Ensure no transform affects the image on mobile */
        transform: none; 
    }
    .hero-full-image .hero-overlay {
        /* Ensure overlay has appropriate padding and box-sizing for content */
        padding: 40px 20px; 
        box-sizing: border-box; 
    }
    .hero-full-image h1 {
        font-size: 2.0em; /* Further reduce h1 size for readability */
        margin-bottom: 15px;
        letter-spacing: -0.5px; 
        line-height: 1.2; 
    }
    .hero-full-image .lead {
        font-size: 1.0em; /* Further reduce lead text size */
        line-height: 1.5;
        max-width: 90%; 
        margin-left: auto; 
        margin-right: auto; 
    }
    .content-wrapper {
        padding-top: var(--section-spacing); /* Ensure padding for responsive */
    }
    .section-title {
        font-size: 2.2em; /* Adjusted for smaller screens */
        margin-bottom: 30px;
    }
    .section-title::after {
        width: 40px; /* Shorter underline for smaller titles */
        height: 3px;
    }
    .section-icon {
        font-size: 0.5em; /* Even smaller icon on small screens */
        margin-right: 8px;
    }
    .introduction-section h2 {
        font-size: 1.6em; /* Smaller h2 for intro */
    }
    .introduction-section .lead {
        font-size: 1.0em; /* Smaller lead for intro */
    }
    .statistics-section .col-lg-3,
    .statistics-section .col-md-4,
    .statistics-section .col-sm-6,
    .values-section .col-md-3,
    .values-section .col-sm-6 {
        width: 100%; /* Full width on small screens */
        max-width: 300px; /* Prevent items from stretching too wide on very narrow screens */
    }
    .stat-item, .value-item {
        margin-bottom: 20px;
    }
    .stat-number {
        font-size: 2.8em; /* Adjusted number size */
    }
    .stat-label {
        font-size: 0.8em; /* Adjusted label size */
    }
    .story-section p,
    .expertise-section p,
    .commitment-section p,
    .why-thailand-section p {
        font-size: 0.95em; /* Slightly smaller body text */
    }
    .value-icon {
        font-size: 3.0em; /* Adjusted icon size */
    }
    .value-item h3 {
        font-size: 1.4em; /* Adjusted heading size */
    }
    .contact-section .contact-details p {
        font-size: 1.0em; /* Adjusted contact text size */
    }
}