.intro {
    background-color: var(--white); /* Change background to white */
    /* Optional: Add subtle border to separate from other sections if needed */
    /* border-top: 1px solid var(--medium-gray); */
    /* border-bottom: 1px solid var(--medium-gray); */
}

.intro-content h2 {
    position: relative; /* Needed for the pseudo-element */
    padding-bottom: 0.75rem; /* Add space below text for the line */
    margin-bottom: 1.5rem; /* Adjust spacing below the line */
}

.intro-content h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0; /* Align to the left */
    width: 100px; /* Set the width of the separator */
    height: 3px; /* Set the thickness */
    background-color: var(--primary-color); /* Use your primary red */
}

/* Optional: Slightly increase padding for more breathing room */
.intro {
    padding: 100px 0; /* Increase vertical padding */
}

/* Add a colored border around the image container */
.intro-image {
    /* You already have border-radius and box-shadow */
    /* border: 2px solid var(--secondary-color);  */
    /* Example: Add a dark blue border */
    /* You might need to adjust the box-shadow if you add a border */
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Slightly stronger shadow */
}

/* Ensure the image itself fits within the border radius */
.intro-image img {
   display: block; /* Prevents small gap below image */
}

/* You could also add the H2 separator from Option 1 here */
.intro-content h2 {
    position: relative;
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
}

.intro-content h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70px;
    height: 3px;
    background-color: var(--primary-color);
}