/* =========================================
   ABOUT US - STORY SECTION
========================================= */

.about-story-section {
    padding-bottom: var(--section-spacing);
}

.about-story {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);

    background-image:
        linear-gradient(
            90deg,
            rgba(0, 172, 214, 0.98) 0%,
            rgba(0, 172, 214, 0.92) 45%,
            rgba(0, 172, 214, 0.10) 75%,
            rgba(0, 172, 214, 0) 100%
        ),
        url('../images/about/about-background.webp');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    padding: var(--space-xl);
}

/* CONTENT */

.about-story__content {
    position: relative;
    z-index: 1;
    max-width: 580px;
}

.about-story__content h2 {
    color: var(--color-white);
    margin-bottom: var(--space-md);
}

.about-story__content h3 {
    color: var(--color-white);
    margin-bottom: var(--space-sm);
}

.about-story__content p {
    color: var(--color-white);
    margin-bottom: var(--space-lg);
}

.about-story__content .btn {
    margin-top: var(--space-xs);
}

/* TABLET */

@media (max-width: 991px) {

    .about-story {
        background-image:
            linear-gradient(
                90deg,
                rgba(0, 172, 214, 0.96) 0%,
                rgba(0, 172, 214, 0.75) 65%,
                rgba(0, 172, 214, 0.25) 100%
            ),
            url('../images/about/about-background.webp');
    }

}

/* MOBILE */

@media (max-width: 767px) {

    .about-story {
        padding: var(--space-lg);

        background-image:
            linear-gradient(
                rgba(0, 172, 214, 0.92),
                rgba(0, 172, 214, 0.88)
            ),
            url('../images/about/about-background.webp');
    }

    .about-story__content {
        max-width: 100%;
    }

}