/* modal.css */
.modal-dialog.modal-lg {
    max-width: 1000px; /* Adjust the maximum width as needed */
    margin: 30px auto; /* Center the modal horizontally and add vertical margins */
}

.modal-content {
    display: flex;
    align-items: stretch;
    padding: 0 !important; /* Remove padding */
}

.modal-body {
    display: flex;
    align-items: stretch;
    padding: 0 !important; /* Remove padding */
}

.modal-img-section {
    flex: 40%; /* Adjusted to 40% as per your HTML */
}

.modal-body-section-wrapper {
    flex: 60%; /* Adjusted to 60% as per your HTML */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-body-section {
    padding: 20px;
    margin: 20px;
    max-height: 600px; /* Adjust the height as needed */
    overflow-y: auto; /* Add scroll if content overflows */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Justify content to the start */
    align-items: flex-start; /* Align items to the start */
    text-align: justify; /* Justify text */
}

.modal-body-section h1 {
    margin-bottom: 5px;
    font-size: 1.5rem; /* Adjust font size as needed */
    text-transform: uppercase;
    color: rgba(85, 85, 85, 0.7);
}

.modal-body-section h6 {
    margin-bottom: 10px;
    color: var(--main-color);
    font-size: 1rem; /* Adjust font size as needed */
    text-transform: uppercase;
    color: #AD002D;
    font-weight: 500;
    margin-bottom: 25px;
}

.modal-body-section p {
    font-size: 1rem; /* Adjust font size as needed */
}

.close {
    font-size: 1.5rem;
    color: #000;
}


.modal-backdrop {
    opacity: 0.9 !important;
}

/* Media Queries for Mobile */
@media (max-width: 768px) {

    .modal-dialog.modal-lg {
        margin: 40px 5px; /* Center the modal horizontally and add vertical margins */
    }
    .modal-body {
        flex-direction: column; /* Stack content vertically on mobile */
    }

    .modal-img-section, .modal-body-section-wrapper {
        flex: 100%; /* Each section takes full width */
    }

    .modal-img-section {
        height: auto; /* Adjust height to auto for proportional scaling */
    }

    .modal-img-section img {
        width: 100%;
        height: auto; /* Maintain aspect ratio */
        object-fit: cover;
    }

    .modal-body-section {
        padding: 10px;
        margin: 10px;
        max-height: none; /* Remove max-height on mobile */
        overflow-y: visible; /* Remove overflow scroll on mobile */
    }

    .close {
        display: none; /* Hide default close button on mobile */
    }

}