.about-us-container {
    max-width: 1440px;
    padding-inline: 40px;
    padding-block: 8px;
    margin-inline: auto;

    .about-us-hero {
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        overflow: hidden;

        .about-us-description {
            font-size: 20px;
            line-height: 32px;
            font-weight: 300;
            color: #FFFFFFCC;
            letter-spacing: -0.14px;
            margin-bottom: 48px;
        }
    }

    .metrics-section {
        max-width: 1440px;
        margin-inline: auto;
        background-color: #EAEFE9;
        padding-block: 32px;
        padding-inline: 56px;
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;

        .about-us-metric-card {
            display: flex;
            align-items: center;
            gap: 24px;

            overflow: hidden;

            .heading-h4 {
                font-size: 50px;
                line-height: 72px;
                color: #668364;
                font-weight: 600;
            }

            .text-sm-medium {
                font-size: 16px;
                line-height: 24px;
                color: #4D5874;
                font-weight: 400;
            }
        }
    }

    .our-story-section {
        padding-block: 96px;

        .our-story-content {
            max-width: 768px;
            text-align: center;
            margin-inline: auto;
        }

        .insurance-badge {
            span {
                border: 1px solid #10393E !important;
                color: #10393E !important;

            }
        }

        h2 {
            margin-bottom: 24px;
            font-size: 40px;
            line-height: 48px;
            letter-spacing: -0.4px;
            font-weight: 500;
            color: #101219;
        }

        p {
            font-size: 20px;
            line-height: 32px;
            font-weight: 400;
            color: #4D5874;
            letter-spacing: -0.14px;
        }
    }

    .our-story-cards-grid {
        margin-top: 64px;
        padding-inline: 60px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;


        .our-story-card {
            padding: 32px;
            border-radius: 24px;
            background-color: #EAEFE9;

            h3 {
                font-size: 24px;
                line-height: 32px;
                font-weight: 500;
                margin-bottom: 24px;
            }

            .story-card-text {
                font-size: 18px;
                line-height: 24px;
                font-weight: 300;
                color: #4D5874;
                letter-spacing: -0.14px;
                margin-bottom: 0;
            }

            &.darkgreen-bg {
                background-color: #13474D;
                color: #FFFFFF;

                .story-card-text {
                    color: #FFFFFFCC;
                }
            }

            &.lightgreen-bg {
                background-color: #668364;
                color: #FFFFFF;

                .story-card-text {
                    color: #FFFFFFCC;
                }
            }

        }
    }

    .our-commitment-section {
        padding-inline: 60px;

        .commitment-content {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }

        .insurance-badge {
            span {
                border: 1px solid #10393E !important;
                color: #10393E !important;
                margin-bottom: 0;
            }
        }

        p {
            color: #4D5874;
            font-size: 20px;
            line-height: 32px;
            font-weight: 300;
            letter-spacing: -0.14px;
        }

        .commitment-video {
            max-width: 1240px;
            margin-inline: auto;
            border-radius: 24px;
            overflow: hidden;
            display: grid;
            position: relative;
            isolation: isolate;
            margin-top: 64px;
            margin-bottom: 96px;

            video {
                width: 100%;
                height: 100%;
                object-fit: contain;
                grid-row: 1/2;
                grid-column: 1/2
            }

            .play-button {
                grid-row: 1/2;
                grid-column: 1/2;
                justify-self: center;
                align-self: center;
                position: relative;
                z-index: 2;
            }

            &:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 1;
                border-radius: 24px;
            }
        }
    }

    @media (max-width: 768px) {
        padding-inline: 16px;

        .home-cta {
            margin: 0 !important;

            .text-subtitle-regular {
                text-align: center;
            }
        }

        .our-story-cards-grid {
            grid-template-columns: repeat(1, 1fr);
            padding-inline: 0;
        }

        .our-commitment-section {
            padding-inline: 0;
        }

        .commitment-content {
            grid-template-columns: repeat(1, 1fr) !important;
        }

        .about-us-hero-content {
            padding: 24px !important;
            padding-block: 78px !important;
        }

        .metrics-section {
            padding-inline: 16px;
        }

        .play-button {
            width: 50px;
            height: 50px;

            svg {
                width: 100%;
                height: 100%;
            }
        }

        .commitment-video {
            margin-top: 32px !important;
            margin-bottom: 32px !important;
        }

        .heading-h4 {
            font-size: 32px !important;
            line-height: 48px !important;
        }

        .text-sm-medium {
            font-size: 14px !important;
            line-height: 24px !important;
        }

        .about-us-metric-card {
            margin-bottom: 20px;

            &:last-child {
                margin-bottom: 0;
            }
        }


    }
}