/* ========== About Page Specific Styles ========== */

/* ========== About Page Specific Styles ========== */

        /* Title Section */
        .about-hero {
            text-align: center;
            padding: 39px 0 0;
        }

        .about-hero h1 {
            font-size: 56px;
            font-weight: 700;
            color: rgba(111, 11, 101, 1);
            font-family: 'Open Sans', sans-serif;
            line-height: 56px;
            margin-bottom: 8px;
        }

        .about-hero .subtitle {
            font-size: 26px;
            font-weight: 600;
            color: rgba(111, 11, 101, 1);
            font-family: 'Open Sans', sans-serif;
            line-height: 26px;
        }

        /* Introduction Text */
        .about-intro {
            margin: 80px auto 0;
            padding: 0 20px;
        }

        .about-intro-text {
            font-size: 20px;
            font-family: 'Lato', sans-serif;
            font-weight: lighter;
            color: var(--text-dark-bg-primary);
            line-height: 28px;
            text-align: justify;
            margin: 0;
        }
        .about-intro p{
            font-size: 20px;
            font-family: 'Lato', sans-serif;
            font-weight: lighter;
            color: var(--text-dark-bg-primary);
            line-height: 28px;
            text-align: justify;
            margin: 0;
        }
        .about-intro-text strong {
            font-weight: 600;
            color: rgba(42, 42, 42, 1);
        }

        .about-intro-text a {
            color: rgba(111, 11, 101, 1);
            text-decoration: underline;
            font-weight: 600;
        }

        .about-intro-text a:hover {
            color: rgba(90, 9, 82, 1);
        }

        /* Section Card Container */
        .about-section {
        
            margin: 64px auto 0;
            padding: 0 20px;
        }

        .about-card {
            display: flex;
            background-color: rgba(111, 11, 101, 1);
            width: 100%;
            height: 276px;
            overflow: hidden;
        }

        .about-card-content {
            flex: 0 0 560px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 0 0 56px;
        }

        .about-card-content h2 {
            font-size: 48px;
            font-weight: 700;
            color: rgba(255, 255, 255, 1);
            font-family: 'Open Sans', sans-serif;
            line-height: 48px;
            margin: 0;
        }

        .about-card-content .divider {
            width: 560px;
            height: 2px;
            background-color: rgba(255, 255, 255, 1);
            margin-top: 24px;
        }

        .about-card-image {
            flex: 0 0 460px;
            height: 276px;
            margin-left: auto;
            background-size: cover;
            background-position: center;
        }

        /* Section Description */
        .about-description {
            /* max-width: 1200px; */
            margin: 32px auto 0;
            padding: 0 20px;
        }

        .about-description p {
            font-size: 20px;
            font-family: 'Lato', sans-serif;
            font-weight: lighter;
            color: var(--text-dark-bg-primary);
            line-height: 28px;
            text-align: justify;
            margin: 0;
        }

        .about-description a {
            color: rgba(111, 11, 101, 1);
            text-decoration: underline;
            font-weight: 600;
        }

        /* Last section margin bottom */
        .about-description-last {
            margin-bottom: 96px;
        }

        /* Section Images */
        .about-card-image.founder {
            background-image: url('../images/about-founder.png');
        }
        .about-card-image.innovation {
            background-image: url('../images/about-innovation.png');
        }
        .about-card-image.challenge {
            background-image: url('../images/about-challenge.png');
        }
        .about-card-image.establish {
            background-image: url('../images/about-establish.png');
        }
        .about-card-image.professional {
            background-image: url('../images/about-professional.png');
        }

        /* ========== Responsive Styles ========== */
        @media (max-width: 1280px) {
            .about-card-content {
                flex: 0 0 62%;
                padding: 0 0 0 40px;
            }

            .about-card-content .divider {
                width: 85%
            }

            .about-card-image {
                flex: 1;
            }
        }

        @media (max-width: 992px) {
            .about-intro {
                margin-top: 48px;
            }

            .about-section {
                margin-top: 48px;
            }

            .about-card {
                flex-direction: column;
                height: auto;
            }

            .about-card-content {
                flex: none;
                padding: 32px;
                order: 1;
            }

            .about-card-content .divider {
                width: 120px;
                margin-top: 20px;
            }

            .about-card-image {
                flex: none;
                width: 100%;
                height: 220px;
                order: 2;
            }

            .about-description {
                margin-top: 24px;
            }
        }

        @media (max-width: 768px) {
            .about-hero {
                padding: 24px 0 0;
            }

            .about-intro {
                margin-top: 32px;
            }

            .about-section {
                margin-top: 32px;
            }

            .about-card-content {
                padding: 24px;
            }

            .about-card-content .divider {
                width: 120px;
                margin-top: 16px;
            }

            .about-card-image {
                height: 180px;
            }

        }

        @media (max-width: 576px) {
            .about-card-image {
                height: 160px;
            }
        }