/* About Section Mobile Styles (max-width: 768px) */
.about-section {
    padding: 40px 0;
}

.about-content-wrapper {
    flex-direction: column; /* Stack columns vertically on mobile */
    gap: 30px;
}

.about-text-column {
    padding-right: 0; /* Remove padding */
    text-align: center;
}

.about-text-column h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.about-text-column h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.about-text-column p {
    font-size: 1rem;
}

/* CORRECTED: About Media Column and Image Responsiveness */
.about-media-column {
    min-height: 250px; /* Smaller min-height for mobile */
    width: 100%; /* Ensure it takes full available width */
    max-width: 100%; /* Important: Constrain max-width */
    overflow: hidden; /* Hide anything overflowing */
    box-sizing: border-box; /* Include padding in width calculation */
    padding: 0 15px; /* Add some horizontal padding to prevent stretching to edges */
}

.about-media-column .about-image {
    width: 100%; /* Ensure the container for the image takes full width */
    height: auto; /* Allow height to adjust naturally */
    display: flex; /* Use flex to center the image if smaller than container */
    justify-content: center;
    align-items: center;
}

.about-image img {
    max-width: 100%; /* CRITICAL: Image itself should not exceed its parent's width */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below image */
}

.about-video-preview {
    position: relative;
    width: 100%;
    height: 0; /* Force aspect ratio with padding-bottom */
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
}

.about-video-preview video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(70%);
}


.about-video-preview .play-button {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
}

/* Video Modal Mobile Adjustments */
.video-modal-content {
    width: 95%; /* Adjust modal width for mobile */
}

.close-video-modal {
    font-size: 30px;
    top: 5px;
    right: 15px;
}