.about-our-story-container {
    position: relative;
    overflow: hidden;

    width: 100%;
    padding: var(--hero-padding);

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-lg);

    color: var(--dark-white);

    background-image: url('../../images/img/about-story-bg.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    isolation: isolate;
}

/* MAIN CINEMATIC OVERLAY */

.about-our-story-container::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 10, 20, 0.92) 0%,
            rgba(4, 10, 20, 0.82) 30%,
            rgba(4, 10, 20, 0.60) 55%,
            rgba(4, 10, 20, 0.30) 100%
        ),

        linear-gradient(
            180deg,
            rgba(11, 31, 58, 0.18),
            rgba(0, 0, 0, 0.12)
        );

    z-index: -1;
}

/* subtle industrial glow */

.about-our-story-container::after {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

    right: -150px;
    top: 50%;

    transform: translateY(-50%);

    background: radial-gradient(
        circle,
        rgba(37, 99, 235, 0.18) 0%,
        rgba(37, 99, 235, 0.08) 35%,
        transparent 75%
    );

    filter: blur(40px);

    pointer-events: none;
    z-index: -1;
}

/* ensure direct children render above the overlay */
.about-our-story-container>* {
    position: relative;
    z-index: 2;
}

.about-our-story-title {
    font-size: var(--mini-text);
    color: var(--light-white);
    text-transform: uppercase;
    font-weight: 500;
}

.about-our-story-title span {
    color: var(--super-light-blue-bg);
}

.about-our-story-subhead {
    font-size: var(--big-head);
    color: var(--light-white);
    font-weight: 600;
}

.about-our-story-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 55%;
    width: 100%;
}

.about-our-story-description {
    font-size: var(--small-para);
    color: var(--dark-white);
    line-height: 1.8;
}

/* responsive styles */
@media (max-width: 1068px) {
     .about-our-story-wrapper {
        max-width: 80%;
    }
}
@media (max-width: 868px) {
    .about-our-story-wrapper {
        max-width: 100%;
    }
}