/* ***************************************************************************/
/* About us page */
/* ***************************************************************************/


.about-us-page {
    .heading {
        margin-bottom: 7rem;

        .section-inner-container {
            max-width    : 1100px;
            border-bottom: 1px solid var(--clr-primary-600);
        }

        .image-container {
            flex: 1 0 45%;
        }

        .image-container img {
            overflow : hidden;
            max-width: 105%;
        }

        .titles {
            justify-content: center;
            flex-direction : column;
            flex           : 1 0 55%;
        }

        .titles p {
            margin: 2rem 0 4rem 0;
        }

        h1 {
            margin: 0;
        }
    }

    .integrating-services {
        padding-bottom: 40rem;

        .section-inner-container {
            max-width: 1100px;
        }

        h2 {
            color: var(--clr-primary-600);
        }

        .section-inner-container>p {
            max-width: 65ch;
            margin   : 3rem auto 7rem auto;
        }

        h2,
        .section-inner-container>p {
            text-align: center;
        }

        .services-container {
            gap                  : 5rem 2rem;
            grid-template-columns: repeat(2, 1fr);
        }

        .services-container p {
            font-style: italic;
        }

        .services-container ul {
            margin        : 1rem 0;
            font-size     : var(--fs-400);
            line-height   : var(--lh-500);
            letter-spacing: var(--ls-200);
        }

        .step {
            place-content   : center;
            width           : 90px;
            aspect-ratio    : 1/1;
            border-radius   : 50%;
            background-color: var(--clr-primary-600);
            margin-bottom   : 4rem;
        }

        .step span {
            font-size  : var(--fs-600);
            line-height: var(--lh-500);
        }
    }
}

@media screen and (max-width: 992px) {
    .about-us-page {
        .section-inner-container {
            padding-left : 3rem;
            padding-right: 3rem;
        }
    }

}

@media screen and (max-width: 768px) {
    .about-us-page {
        .heading {

            .section-inner-container {
                flex-direction: column;
                border        : 0;
            }

            .image-container img {
                max-width: 100%;
            }

            .image-container,
            .titles {
                flex: 1 0 100%;
            }

            img,
            h1,
            p,
            a {
                text-align: center;
                margin    : 0 auto;
            }

            .titles {
                padding-top: 3rem;
            }

            p {
                margin: 1.5rem auto 3rem auto;
            }
        }

        .integrating-services {
            padding-bottom: 20rem;

            .services-container {
                grid-template-columns: 1fr;
            }

            .services-container ul {
                font-size     : var(--fs-200);
                line-height   : 1.8rem;
                letter-spacing: 0.035rem;
            }

            .step {
                margin-bottom: 2rem;
            }
        }
    }
}