#about {
    padding: 8rem 0;
    background: #1a1a1a;
}

/* About Content Section */
.about-content {
    position: relative;
    background: #fff; /* Solid white background */
    padding: 7rem 0; /* Increased padding for more breathing room */
}

/* Adjust container width for better balance */
.about-content .container {
    max-width: 1400px; /* Wider container for a more spacious look */
}

.about-text {
    color: #1a1a1a; /* Dark text for white background */
    padding-right: 3rem; /* Increased padding for better spacing */
}

.about-text h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); /* Subtle text shadow for depth */
}

.about-text h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1.3;
    margin-bottom: 2rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); /* Subtle text shadow for depth */
}

.about-text p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 1.1rem;
    line-height: 1.8; /* Increased line spacing for readability */
    margin-bottom: 1.5rem;
}

.about-illustration {
    display: flex;
    justify-content: flex-end; /* Push the video to the right edge */
    align-items: center;
    height: auto; /* Let the height be determined by content */
    min-height: 600px; /* Increased to ensure enough space for larger video */
    padding-right: 0; /* Remove padding to allow the video to sit closer to the edge */
}

.architectural-video {
    width: 100%; /* Ensure full width of the container */
    height: 600px; /* Height to match the text content */
    opacity: 0.8; /* Slight transparency to match the Pascall+Watson sketch style */
    border: none !important; /* Explicitly remove the border */
    border-radius: 10px; /* Rounded corners for a polished look */
    object-fit: cover; /* Ensure the video fills the space while maintaining aspect ratio */
    box-shadow: none !important; /* Ensure no shadow */
}

/* Text Animation */
.fade-slide-in {
    opacity: 0;
    transform: translateX(-50px); /* Start slightly to the left */
    animation: fadeSlideIn 1s ease forwards;
}

.about-text h3.fade-slide-in { animation-delay: 0.2s; }
.about-text h4.fade-slide-in { animation-delay: 0.4s; }
.about-text p.fade-slide-in:nth-child(3) { animation-delay: 0.6s; }
.about-text p.fade-slide-in:nth-child(4) { animation-delay: 0.8s; }
.about-text p.fade-slide-in:nth-child(5) { animation-delay: 1.0s; }

@keyframes fadeSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .about-text {
        padding-right: 1rem;
        padding-bottom: 2rem;
    }

    .about-illustration {
        justify-content: center; /* Center the video on smaller screens */
        padding-right: 0;
        min-height: 350px; /* Adjusted for smaller screens */
    }

    .architectural-video {
        width: 100%; /* Full width on smaller screens */
        height: 350px; /* Adjusted height for smaller screens */
    }

    .about-content .container {
        max-width: 100%; /* Full width on smaller screens */
    }
}