/* ABOUT PAGE SPECIFIC STYLES */

/* Style credentials 25% smaller in section titles */
.section-title .credentials {
    font-size: 0.75em; /* 25% smaller than parent font size */
    font-weight: 400; /* Slightly lighter than the bold title */
    /* Inherits color from parent .section-title (same color as title text) */
}

/* MODIFIED STYLES FOR FLOATING IMAGE */
/* Custom styles for floating Karen's image and text wrapping */
/* Applied when screen is wider than 992px */
@media (min-width: 993px) {
    .about-karen-section .about-karen-image {
        float: left;
        width: 230px; /* Matches the general max-width of the image */
        max-width: 30%; /* Prevents image from being too large on very wide screens */
        margin-right: 45px; /* Space between the image and the start of the text */
        margin-bottom: 20px; /* Space below the image if text is short and wraps under it */
        /* The existing AOS data-aos="fade-right" will work fine with float */
    }
    .about-karen-section .about-karen-image img {
        display: block; /* Ensures the image behaves as a block element within its container */
        width: 100%;    /* Makes the image take the full width of its 230px container */
        height: auto;   /* Maintains the image's aspect ratio */
        border-radius: var(--border-radius, 8px);
        box-shadow: var(--box-shadow-standard, 0 5px 20px rgba(0,0,0,0.07));
        transition: var(--transition-standard, all 0.3s ease);
        border: 3px solid rgba(255,255,255,0.1);
    }
    .about-karen-section .about-karen-image img:hover {
        transform: scale(1.02);
        box-shadow: var(--box-shadow-hover, 0 10px 30px rgba(0,0,0,0.1));
    }
    .about-karen-section .about-karen-text {
        /* This creates a new block formatting context, which makes the text flow
           correctly around the floated image and prevents layout issues. */
        overflow: hidden; 
        /* The existing AOS data-aos="fade-left" will work fine */
    }
}

/* On smaller screens (<= 992px), revert to default stacking behavior.
   The image will appear above the text. */
@media (max-width: 992px) {
    .about-karen-section .about-karen-image {
        float: none; /* Remove the float */
        width: auto; /* Allow original sizing rules (e.g., flex, text-align) to take effect */
        margin-right: 0; /* Remove right margin */
        margin-bottom: 30px; /* Ensure proper spacing below image */
        text-align: center; /* Center the image container */
        /* The original CSS for max-width: 768px makes .about-karen-content
           flex-direction: column and align-items: center, which will stack and center. */
    }
    
    .about-karen-section .about-karen-image img {
        display: block;
        margin-left: auto; /* Center the image if its container is wider */
        margin-right: auto; /* Center the image */
        max-width: 250px; /* Reasonable max size for mobile */
        border-radius: var(--border-radius, 8px);
        box-shadow: var(--box-shadow-standard, 0 5px 20px rgba(0,0,0,0.07));
        transition: var(--transition-standard, all 0.3s ease);
    }
    
    .about-karen-section .about-karen-text {
        overflow: visible; /* Reset overflow property */
    }
}

/* Additional about page specific styles can go here */