/* Styles specific to welcome.html */
.main-content {
    flex-grow: 1; /* Ensures main content takes available space if body is flex */
}

.row {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
}

.row-1 {
    height: 30vh;
    background-color: white;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.row-1 h1 {
    font-size: 3em;
    margin: 0.2em 0;
    color: #343a40;
}

.row-1 p {
    font-size: 1.5em;
    margin: 0.1em 0;
    color: #495057;
}

.row-1 .sub-text {
    font-size: 1.2em;
    margin-top: 0.5em;
    color: #6c757d;
}

.column {
    flex: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Center content like text or placeholder */
}

.column img {
    max-width: 100%;
    height: auto;
    display: block;
}

.image-column {
    flex-basis: 50%;
}

.text-column {
    flex-basis: 50%;
    padding: 20px; /* Add padding for text content */
    text-align: left; /* Align text to the left by default */
}

.text-column .service-columns-container {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.text-column .service-column {
    flex-basis: 48%; /* Adjust as needed */
}

.text-column .service-column h3 {
    /* Optional: Style for these sub-headings if needed */
    font-size: 1.1em; 
    margin-bottom: 8px;
}

/* Placeholder image style */
.placeholder-image {
    background-color: white;
    width: 100%;
    min-height: 200px; /* Give it a minimum height */
    height: auto; /* Adjust as needed, or set a fixed height */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    font-size: 1.2em;
    text-align: center;
}

.text-column ul li {
    margin-bottom: 5px; /* Adjust this value as needed */
}

/* You might want some body/html rules here if not covered by a base_styles.css
   or if welcome.html needs a very different body layout.
   For example, if base_styles.css doesn't make body a flex container: */
/*
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    font-family: sans-serif;
}
*/



/* ... your existing styles ... */

/* Styles for the mobile-specific structure */
.row-mobile {
    padding: 15px;
    /* Add any other general styling for mobile rows */
}

.mobile-image-container,
.mobile-text-container {
    width: 100%; /* Ensure they take full width */
    margin-bottom: 20px; /* Space between stacked items */
}

.mobile-text-container h2 {
    font-size: clamp(18px, 2.3vw, 30px); /* Adjusted for similar size to row-1 text */
    font-weight: 600; /* Optional: match font-weight if desired */
    margin-bottom: 10px;
}

.mobile-text-container ul {
    padding-left: 20px; /* Or your preferred list styling */
}

.mobile-text-container ul li {
    font-size: 0.95em; /* Adjust as needed */
    margin-bottom: 8px; /* Spacing between list items */
}

.mobile-text-container .service-category {
    margin-bottom: 15px; /* Space between categories */
}
.mobile-text-container .service-category h3 {
    /* Optional: Style for these sub-headings if needed */
    font-size: 1.1em;
    margin-bottom: 8px;
}

/* Ensure placeholder images in mobile view behave well */
.mobile-image-container .placeholder-image {
    /* You might already have styles for .placeholder-image that work,
       but you can add mobile-specific overrides here if needed */
    background-color: #eee; /* Example */
}

.mobile-image-container .placeholder-image img {
    max-width: 100%;
    height: auto;
}

/* You might want to adjust the row-1 styles for mobile too,
   even if its structure doesn't change, its appearance might.
   If you move its inline styles to classes, you can target them here.
   For example:
*/
/*
@media (max-width: 768px) {
    .row-1 .main-title { font-size: 5vw; }
    .row-1 .sub-title { font-size: 4vw; }
    .row-1 .sub-text { font-size: 3vw; }
}
*/