/* Peoiple We Serve Section */
.peopleweserve-section-title {
    color: #FFFFFF; /* White text for title */
    font-family: 'Revans Medium', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 40px;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
}

/* Custom CSS for the Full-Page Split Modal */

/* Override Bootstrap's default modal size to make it full screen */
.full-page-modal .modal-dialog {
    max-width: 100vw; /* Full viewport width */
    height: 100vh;    /* Full viewport height */
    margin: 0;        /* Remove default margins */
    display: flex;    /* Use flex to properly position content */
    align-items: center; /* Center vertically (if content isn't full height) */
    justify-content: center; /* Center horizontally (if content isn't full width) */
    z-index: 1050; /* Add this line to set the z-index */
}

.full-page-modal .modal-content {
    height: 100vh;    /* Full viewport height */
    width: 100vw;     /* Full viewport width */
    background-color: #BA1413; /* Bootstrap's 'danger' red */
    border-radius: 0; /* No rounded corners for a truly full-page look */
    display: flex;    /* Use flex to split content horizontally */
    flex-direction: column; /* Arrange children in a row */
    padding: 0;       /* Remove default padding */  
    overflow-y: hidden; /* Prevent content scrollbar on the modal-content itself */
}
/* This row MUST take up the entire vertical space remaining */
/* The 'flex-grow-1' class already applied in your HTML should handle this */
.row.flex-grow-1 {
    height: 100%; 
}

/* Left Half (Text/Content)  */
.full-page-modal .modal-left-half {
    height: auto !important;
    overflow-y: visible !important;
    
    color: white;
    scrollbar-color: white;
}

.modal-left-half-overlay-text {
    padding: 10px 40px 20px 40px; /* Add top padding to clear browser bars */
}

.modal-left-half-overlay-text-title {
    font-size: 3.25rem;
}

.modal-left-half-overlay-text-text {
    font-size: 1rem;
}


/* Right Half (Image)  */
.full-page-modal .modal-right-half {
    display: block;
    height: 100%;
    margin: 0px auto 0px auto;
}
.full-page-modal .modal-right-half img { 
    /* Critical: Limits the image's vertical size to 100% of the row height (minus padding) 
       or a percentage of the viewport height to be safer. */
    max-height: calc(100% - 200px);
    /* Ensures the entire image is visible, scaling down to fit the max-height */
    object-fit: contain; 
    /* Prevents the image from being forced to 100% width if max-height is the constraint */
    width: auto;
}

/* Right Half (Image) - Fixed width, full height on large screens */
.full-page-modal .modal-right-gutter {/* Key: Flex-basis sets the fixed width, flex-shrink: 0 prevents shrinking */
    flex: 0 0 160px; 
    min-width: 160px;
    max-width: 160px; /* Allows it to take up to 1/3 of the screen on very wide displays */
    
    position: relative;
    padding: 0;
    height: 100%; /* Ensure it takes the full height of the modal-content */
}

/* For smaller */
@media (max-width: 767.98px) {

    .modal-left-half-overlay-text-title {
        font-size: 1.3rem;
    }

    .modal-left-half-overlay-text-text {
        font-size: 0.8rem;
    }    
    /* CRITICAL: This is what enables the stacking */
    .full-page-modal .modal-content {
        flex-direction: column !important; 
        overflow-y: auto !important;
    }

    /* Right Half sizing for mobile/tablet */
    .modal-right-half {
        /* Add margin to separate the image from the text below it when stacked */
        margin-bottom: 0px;
    }
    
    .modal-right-half img {        
        /* Limit the height on mobile/tablet screens */
        max-height: 40vh; /* Limits image to 40% of the viewport height */
        width: auto;     /* Maintains aspect ratio */
        object-fit: contain; /* Ensures image fits within the bounds without clipping */
    }
    
    /* Left Half sizing for mobile/tablet */
    .full-page-modal .modal-left-half {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        height: auto !important;
        overflow-y: visible !important; 
    }
}

body.modal-active .navbar {
    display: none;
}