/* Section 6: Testimonials */
/* ======================= */



/* Use '#' to target the single H2 instance that occurs within this class */
#testimonials h2 {
    padding-bottom: 9px;
    border-bottom: 1px solid #00a8ac; /* Draw line underneath subheading */
}

/* Styling for the container that contains one company */
#testimonials .company {
    display: flex; /* Enables flexbox layout */
    flex-direction: row; /* Stack the elements within the flexbox horizontially */
    align-items: center; /* Center items vertically*/
    width: 80%; /* Defines how much of the width of the parent container this block will take up */
    margin: 50px auto; /* Sets margin on top and bottom of .company, auto margins on left and right to center horizontally */
    gap: 40px; /* Sets the space between two elements in .company */
}

/* Adjust size of the start quotation mark */
#testimonials .company .icon_quote_name_job img {
    width: 50px;
    height: auto; /* height of image scaled to maintain aspect ratio of original */ 
    padding-bottom: 5px; /* Add some spacing between the quote and the text beneath it */
}

/* Adjust size of the company logo */
#testimonials .company img {
    width: 200px;
    height: auto; /* height of image scaled to maintain aspect ratio of original */
}

/* Adjust the styling of the name of the person giving the testimonal */
#testimonials .company .icon_quote_name_job h3 {
    font-weight: 500; 
    margin-bottom: 2px; /* Set gap between name and job title */
}




/* Media query for smaller screens (e.g. mobile devices) */
@media (max-width: 768px) {
    /* Stack the elements in .icon_quote_name_job vertically */
    #testimonials .company .icon_quote_name_job {
        display: flex;
        flex-direction: column; /* Stack items on top of each other */
        align-items: center; /* Center horizontally */
        text-align: center; /* Align text elements to the center */
    }

    /* Ensure the company container stacks vertically */
    #testimonials .company {
        flex-direction: column; /* Stack the logo and content vertically */
        gap: 20px; /* Reduce gap between stacked items */
    }

    /* Center the company logo on mobile */
    #testimonials .company img {
        margin: 0 auto; /* Center logo horizontally */
    }

    /* Center the h4 element inside .icon_quote_name_job */
    #testimonials .company .icon_quote_name_job h4 {
        text-align: center; /* Center the h4 text */
        margin: 0; /* Remove any extra margins */
    }
}