.about.template-3 {
    display: flex;
    width: 100%;

    & .cards-wrapper {
        display: flex;
    }

    & .card-right {
        margin-left: -5rem;
    }
    
    & .about-svg-background {
        height: 34.375rem;
        filter: drop-shadow(0rem 0.0625rem 0.625rem rgba(0, 0, 0, 0.10));
    }

    & .about-svg-background {
        width: 100%;
    }
    
    & .card-left .about-svg-background {
        width: 100%;
    }
    
    & .svg-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 38.75rem;
    }

    & .template-3-about-button:hover {
        box-shadow: inset 0 0 6.25rem rgba(255, 255, 255, 0.1);
    }
    
    & .svg-video-fill {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

}

@container page-container (min-width: 768px) {
    .about.template-3 {
        & .card-left .about-svg-background path {
            d: path("M697.387 511.157C692.186 533.887 671.963 550.004 648.646 550.003L49.9959 549.989C22.3821 549.989 -0.00298876 527.603 -0.00298635 499.989L-0.00306908 50C-0.00306667 22.3858 22.3827 -8.20165e-06 49.9969 -5.78753e-06L751.625 -5.48441e-06C783.742 -2.67669e-06 807.529 29.8463 800.365 61.1536L697.387 511.157Z");
        }
        
        & .card-right .about-svg-background path {
            d: path("M104.968 38.8465C110.169 16.1169 130.391 0 153.708 0H495C522.614 0 545 22.3858 545 50V499.996C545 527.61 522.614 549.996 495 549.996L50.7337 549.993C18.6173 549.992 -5.17021 520.146 1.99397 488.839L104.968 38.8465Z");
        }
    }
}

@container page-container (max-width: 767px) {
    .about.template-3 {
        & .card-left .about-svg-background path {
            d: path("M23.3087 430.414C9.6706 427.293 0.000239716 415.159 0.000562632 401.169L0.00912953 29.9993C0.00951194 13.431 13.4409 -2.8755e-05 30.0091 -2.65824e-05L328 -1.80232e-05C344.568 -1.58505e-05 358 13.4314 358 30L358 469.36C358 488.63 340.092 502.902 321.308 498.604L23.3087 430.414Z");
        }
        
        & .card-right .about-svg-background path {
            d: path("M334.694 69.6114C348.331 72.7329 358 84.8655 358 98.8551L358 254C358 270.569 344.569 284 328 284L30.0002 284C13.4316 284 7.94198e-05 270.568 0.000232732 254L0.00207355 30.6426C0.00222698 11.372 17.9112 -2.90065 36.696 1.39922L334.694 69.6114Z");
        }
    }
}

@container page-container (min-width: 768px) {
    .about.template-3 {
        & .svgDivContainer {
            width: 700px;
            height: 450px;
        }
    }
}

@container page-container (max-width: 767px) {
    .about.template-3 {
        & .svgDivContainer {
            width: 310px;
            height: 452px;
        }
    }
}

@container page-container (max-width: 767px) {
    .about.template-3 {
        & .cards-wrapper {
            flex-direction: column;
            width: 100%;
            max-width: 22.375rem;
            margin: 3rem auto;
        }
        
        & .card-right {
            margin-left: 0;
            margin-top: -2.5rem;
        }
        
        & .card-left .about-svg-background {
            width: 22.375rem;
            height: 31.25rem;
        }
        
        & .card-right .about-svg-background {
            width: 22.375rem;
            height: 17.75rem;
        }

        & .svg-content {
            width: 100%;
            max-width: 25rem;
            padding: 0.75rem 0.5rem;
            box-sizing: border-box;
        }
    }
}

.about.template-3 {
    background: var(--section-background-mobile-color, rgba(0, 0, 0, 0.00));
    justify-self: var(--section-flexbox-mobile-justifySelf, center);
    flex-wrap: var(--section-flexbox-mobile-flexWrap, wrap);
    flex-direction: var(--section-flexbox-mobile-flexDirection, row);
    justify-content: var(--section-flexbox-mobile-justifyContent, space-around);
    align-items: var(--section-flexbox-mobile-alignItems, center);
    align-content: var(--section-flexbox-mobile-alignContent, center);
    gap: calc(var(--section-flexbox-mobile-rowGap, 2) * 1rem) calc(var(--section-flexbox-mobile-columnGap, 1) * 1rem);
    margin: calc(var(--section-margin-mobile-top, 0) * 1rem) calc(var(--section-margin-mobile-right, 0) * 1rem) calc(var(--section-margin-mobile-bottom, 0) * 1rem) calc(var(--section-margin-mobile-left, 0) * 1rem);
    padding: calc(var(--section-padding-mobile-top, 3) * 1rem) calc(var(--section-padding-mobile-right, 1) * 1rem) calc(var(--section-padding-mobile-bottom, 3) * 1rem) calc(var(--section-padding-mobile-left, 1) * 1rem);

    border-style: var(--section-border-mobile-top-style, solid) var(--section-border-mobile-right-style, solid) var(--section-border-mobile-bottom-style, solid) var(--section-border-mobile-left-style, solid);
    border-width: calc(var(--section-border-mobile-top-width, 0) * 1rem) calc(var(--section-border-mobile-right-width, 0) * 1rem) calc(var(--section-border-mobile-bottom-width, 0) * 1rem) calc(var(--section-border-mobile-left-width, 0) * 1rem);
    border-color: var(--section-border-mobile-top-color, rgba(255, 255, 255, 1.00)) var(--section-border-mobile-right-color, rgba(255, 255, 255, 1.00)) var(--section-border-mobile-bottom-color, rgba(255, 255, 255, 1.00)) var(--section-border-mobile-left-color, rgba(255, 255, 255, 1.00));
    border-radius: calc(var(--section-border-mobile-left-radius, 0) * 1rem) calc(var(--section-border-mobile-top-radius, 0) * 1rem) calc(var(--section-border-mobile-right-radius, 0) * 1rem) calc(var(--section-border-mobile-bottom-radius, 0) * 1rem);

    & .card-left .about-svg-background path {
        fill: var(--card-background-mobile-color, rgba(255, 255, 255, 1.00));
    }

    & .card-title {
        width: 100%;
        color: var(--cardTitle-font-mobile-textColor, rgba(0, 0, 0, 1.00));
        font-size: calc(var(--cardTitle-font-mobile-fontSize, 2) * 1rem);
        font-weight: var(--cardTitle-font-mobile-fontWeight, 700);
        line-height: var(--cardTitle-font-mobile-lineHeight, 1);
        text-align: var(--cardTitle-font-mobile-textAlign, left);
        font-family: var(--cardTitle-font-mobile-fontFamily, var(--heading-font-family));
        text-transform: var(--cardTitle-font-mobile-textTransform, none);
    }

    & .card-description {
        color: var(--cardDescription-font-mobile-textColor, rgba(0, 0, 0, 1.00));
        font-size: calc(var(--cardDescription-font-mobile-fontSize, 1.125) * 1rem);
        font-weight: var(--cardDescription-font-mobile-fontWeight, 500);
        line-height: var(--cardDescription-font-mobile-lineHeight, 1.5);
        text-align: var(--cardDescription-font-mobile-textAlign, left);
        font-family: var(--cardDescription-font-mobile-fontFamily, var(--global-font-family));
        text-transform: var(--cardDescription-font-mobile-textTransform, none);
    }

    & .about-text {
        display: flex;
        max-height: 24rem;
        overflow-y: auto;
        overflow-x: hidden;
        background: var(--card-background-mobile-color, rgba(255, 255, 255, 1.00));
        margin: calc(var(--card-margin-mobile-top, 0) * 1rem) calc(var(--card-margin-mobile-right, 0) * 1rem) calc(var(--card-margin-mobile-bottom, 0) * 1rem) calc(var(--card-margin-mobile-left, 0) * 1rem);
        padding: calc(var(--card-padding-mobile-top, 1.25) * 1rem) calc(var(--card-padding-mobile-right, 1.25) * 1rem) calc(var(--card-padding-mobile-bottom, 1.25) * 1rem) calc(var(--card-padding-mobile-left, 1.25) * 1rem);
        border-radius: calc(var(--card-border-mobile-left-radius, 0) * 1rem) calc(var(--card-border-mobile-top-radius, 0) * 1rem) calc(var(--card-border-mobile-right-radius, 0) * 1rem) calc(var(--card-border-mobile-bottom-radius, 0) * 1rem);
        border-style: var(--card-border-mobile-top-style, solid) var(--card-border-mobile-right-style, solid) var(--card-border-mobile-bottom-style, solid) var(--card-border-mobile-left-style, solid);
        border-width: calc(var(--card-border-mobile-top-width, 0) * 1rem) calc(var(--card-border-mobile-right-width, 0) * 1rem) calc(var(--card-border-mobile-bottom-width, 0) * 1rem) calc(var(--card-border-mobile-left-width, 0) * 1rem);
        border-color: var(--card-border-mobile-top-color, rgba(255, 255, 255, 1.00)) var(--card-border-mobile-right-color, rgba(255, 255, 255, 1.00)) var(--card-border-mobile-bottom-color, rgba(255, 255, 255, 1.00)) var(--card-border-mobile-left-color, rgba(255, 255, 255, 1.00));

        flex-direction: row;
        justify-content: var(--card-flexbox-mobile-justifyContent, center);
        align-items: var(--card-flexbox-mobile-alignItems, center);
        justify-self: var(--card-flexbox-mobile-justifySelf, auto);
        align-content: flex-start;
        flex-wrap: var(--card-flexbox-mobile-flexWrap, wrap);
        gap: calc(var(--card-flexbox-mobile-columnGap, 1) * 1rem) calc(var(--card-flexbox-mobile-rowGap, 0) * 1rem);
    }

    & .about-us-btn {
        text-decoration: none;
        text-align: var(--button-font-mobile-textAlign, center);
        font-size: calc(var(--button-font-mobile-fontSize, 1.125) * 1rem);
        font-weight: var(--button-font-mobile-fontWeight, 600);
        font-family: var(--button-font-mobile-fontFamily, var(--global-font-family));
        line-height: var(--button-font-mobile-lineHeight, 1);
        text-transform: var(--button-font-mobile-textTransform, none);
        color: var(--button-font-mobile-textColor, var(--global-color-0));
        background-color: var(--button-background-mobile-color, var(--global-color-1));
        border-radius: calc(var(--button-border-mobile-left-radius, 4) * 1rem) calc(var(--button-border-mobile-top-radius, 4) * 1rem) calc(var(--button-border-mobile-right-radius, 4) * 1rem) calc(var(--button-border-mobile-bottom-radius, 4) * 1rem);
        border-style: var(--button-border-mobile-top-style, solid) var(--button-border-mobile-right-style, solid) var(--button-border-mobile-bottom-style, solid) var(--button-border-mobile-left-style, solid);
        border-width: calc(var(--button-border-mobile-top-width, 0) * 1rem) calc(var(--button-border-mobile-right-width, 0) * 1rem) calc(var(--button-border-mobile-bottom-width, 0) * 1rem) calc(var(--button-border-mobile-left-width, 0) * 1rem);
        border-color: var(--button-border-mobile-top-color, rgba(255, 255, 255, 1.00)) var(--button-border-mobile-right-color, rgba(255, 255, 255, 1.00)) var(--button-border-mobile-bottom-color, rgba(255, 255, 255, 1.00)) var(--button-border-mobile-left-color, rgba(255, 255, 255, 1.00));
        padding: calc(var(--button-padding-mobile-top, 0.5) * 1rem) calc(var(--button-padding-mobile-right, 1.25) * 1rem) calc(var(--button-padding-mobile-bottom, 0.5) * 1rem) calc(var(--button-padding-mobile-left, 1.25) * 1rem);
        margin: calc(var(--button-margin-mobile-top, 0) * 1rem) calc(var(--button-margin-mobile-right, 0) * 1rem) calc(var(--button-margin-mobile-bottom, 0) * 1rem) calc(var(--button-margin-mobile-left, 0) * 1rem);

        &:hover {
            color: var(--button-font-hover-mobile-textColorHover, var(--global-color-0));
            background-color: var(--button-background-mobile-colorHover, var(--global-color-1));
            border-color: var(--button-border-mobile-top-colorHover, rgba(255, 255, 255, 1.00)) var(--button-border-mobile-right-colorHover, rgba(255, 255, 255, 1.00)) var(--button-border-mobile-bottom-colorHover, rgba(255, 255, 255, 1.00)) var(--button-border-mobile-left-colorHover, rgba(255, 255, 255, 1.00));
        }
    }
}

@container page-container (min-width: 768px) {
    .about.template-3 {
        justify-self: var(--section-flexbox-tablet-justifySelf, center);
        flex-wrap: var(--section-flexbox-tablet-flexWrap, wrap);
        flex-direction: var(--section-flexbox-tablet-flexDirection, row);
        justify-content: var(--section-flexbox-tablet-justifyContent, space-around);
        align-items: var(--section-flexbox-tablet-alignItems, center);
        align-content: var(--section-flexbox-tablet-alignContent, center);
        gap: calc(var(--section-flexbox-tablet-rowGap, 2) * 1rem) calc(var(--section-flexbox-tablet-columnGap, 1) * 1rem);
        margin: calc(var(--section-margin-tablet-top, 0) * 1rem) calc(var(--section-margin-tablet-right, 0) * 1rem) calc(var(--section-margin-tablet-bottom, 0) * 1rem) calc(var(--section-margin-tablet-left, 0) * 1rem);
        padding: calc(var(--section-padding-tablet-top, 3) * 1rem) calc(var(--section-padding-tablet-right, 1) * 1rem) calc(var(--section-padding-tablet-bottom, 3) * 1rem) calc(var(--section-padding-tablet-left, 1) * 1rem);

        border-width: calc(var(--section-border-tablet-top-width, 0) * 1rem) calc(var(--section-border-tablet-right-width, 0) * 1rem) calc(var(--section-border-tablet-bottom-width, 0) * 1rem) calc(var(--section-border-tablet-left-width, 0) * 1rem);
        border-radius: calc(var(--section-border-tablet-left-radius, 0) * 1rem) calc(var(--section-border-tablet-top-radius, 0) * 1rem) calc(var(--section-border-tablet-right-radius, 0) * 1rem) calc(var(--section-border-tablet-bottom-radius, 0) * 1rem);

        & .card-title {
            width: 100%;
            font-size: calc(var(--cardTitle-font-tablet-fontSize, 2) * 1rem);
            line-height: var(--cardTitle-font-tablet-lineHeight, 1);
            text-align: var(--cardTitle-font-tablet-textAlign, left);
        }

        & .card-description {
            font-size: calc(var(--cardDescription-font-tablet-fontSize, 1.25) * 1rem);
            line-height: var(--cardDescription-font-tablet-lineHeight, 1.5);
            text-align: var(--cardDescription-font-tablet-textAlign, left);
        }

        & .about-text {
            display: flex;
            max-height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            margin: calc(var(--card-margin-tablet-top, 0) * 1rem) calc(var(--card-margin-tablet-right, 0) * 1rem) calc(var(--card-margin-tablet-bottom, 0) * 1rem) calc(var(--card-margin-tablet-left, 0) * 1rem);
            padding: calc(var(--card-padding-tablet-top, 1.25) * 1rem) calc(var(--card-padding-tablet-right, 1.25) * 1rem) calc(var(--card-padding-tablet-bottom, 1.25) * 1rem) calc(var(--card-padding-tablet-left, 1.25) * 1rem);
            border-radius: calc(var(--card-border-tablet-left-radius, 0) * 1rem) calc(var(--card-border-tablet-top-radius, 0) * 1rem) calc(var(--card-border-tablet-right-radius, 0) * 1rem) calc(var(--card-border-tablet-bottom-radius, 0) * 1rem);
            border-width: calc(var(--card-border-tablet-top-width, 0) * 1rem) calc(var(--card-border-tablet-right-width, 0) * 1rem) calc(var(--card-border-tablet-bottom-width, 0) * 1rem) calc(var(--card-border-tablet-left-width, 0) * 1rem);

            flex-direction: row;
            justify-content: var(--card-flexbox-tablet-justifyContent, center);
            align-items: var(--card-flexbox-tablet-alignItems, center);
            justify-self: var(--card-flexbox-tablet-justifySelf, auto);
            align-content: flex-start;
            flex-wrap: var(--card-flexbox-tablet-flexWrap, wrap);
            gap: calc(var(--card-flexbox-tablet-columnGap, 1) * 1rem) calc(var(--card-flexbox-tablet-rowGap, 0) * 1rem);
        }

        & .about-us-btn {
            text-decoration: none;
            text-align: var(--button-font-tablet-textAlign, center);
            font-size: calc(var(--button-font-tablet-fontSize, 1.125) * 1rem);
            line-height: var(--button-font-tablet-lineHeight, 1);
            border-radius: calc(var(--button-border-tablet-left-radius, 4) * 1rem) calc(var(--button-border-tablet-top-radius, 4) * 1rem) calc(var(--button-border-tablet-right-radius, 4) * 1rem) calc(var(--button-border-tablet-bottom-radius, 4) * 1rem);
            border-width: calc(var(--button-border-tablet-top-width, 0) * 1rem) calc(var(--button-border-tablet-right-width, 0) * 1rem) calc(var(--button-border-tablet-bottom-width, 0) * 1rem) calc(var(--button-border-tablet-left-width, 0) * 1rem);
            padding: calc(var(--button-padding-tablet-top, 0.5) * 1rem) calc(var(--button-padding-tablet-right, 1.25) * 1rem) calc(var(--button-padding-tablet-bottom, 0.5) * 1rem) calc(var(--button-padding-tablet-left, 1.25) * 1rem);
            margin: calc(var(--button-margin-tablet-top, 0) * 1rem) calc(var(--button-margin-tablet-right, 0) * 1rem) calc(var(--button-margin-tablet-bottom, 0) * 1rem) calc(var(--button-margin-tablet-left, 0) * 1rem);

            &:hover {
                color: var(--button-font-hover-tablet-textColorHover, var(--global-color-0));
            }
        }
    }
}

@container page-container (min-width: 992px) {
    .about.template-3 {
        justify-self: var(--section-flexbox-desktop-justifySelf, center);
        flex-wrap: var(--section-flexbox-desktop-flexWrap, wrap);
        flex-direction: var(--section-flexbox-desktop-flexDirection, row);
        justify-content: var(--section-flexbox-desktop-justifyContent, space-around);
        align-items: var(--section-flexbox-desktop-alignItems, center);
        align-content: var(--section-flexbox-desktop-alignContent, center);
        gap: calc(var(--section-flexbox-desktop-rowGap, 2) * 1rem) calc(var(--section-flexbox-desktop-columnGap, 1) * 1rem);
        margin: calc(var(--section-margin-desktop-top, 0) * 1rem) calc(var(--section-margin-desktop-right, 0) * 1rem) calc(var(--section-margin-desktop-bottom, 0) * 1rem) calc(var(--section-margin-desktop-left, 0) * 1rem);
        padding: calc(var(--section-padding-desktop-top, 3) * 1rem) calc(var(--section-padding-desktop-right, 1) * 1rem) calc(var(--section-padding-desktop-bottom, 3) * 1rem) calc(var(--section-padding-desktop-left, 1) * 1rem);

        border-width: calc(var(--section-border-desktop-top-width, 0) * 1rem) calc(var(--section-border-desktop-right-width, 0) * 1rem) calc(var(--section-border-desktop-bottom-width, 0) * 1rem) calc(var(--section-border-desktop-left-width, 0) * 1rem);
        border-radius: calc(var(--section-border-desktop-left-radius, 0) * 1rem) calc(var(--section-border-desktop-top-radius, 0) * 1rem) calc(var(--section-border-desktop-right-radius, 0) * 1rem) calc(var(--section-border-desktop-bottom-radius, 0) * 1rem);

        & .card-title {
            width: 100%;
            font-size: calc(var(--cardTitle-font-desktop-fontSize, 2) * 1rem);
            line-height: var(--cardTitle-font-desktop-lineHeight, 1);
            text-align: var(--cardTitle-font-desktop-textAlign, left);
        }

        & .card-description {
            font-size: calc(var(--cardDescription-font-desktop-fontSize, 1.5) * 1rem);
            line-height: var(--cardDescription-font-desktop-lineHeight, 1.5);
            text-align: var(--cardDescription-font-desktop-textAlign, left);
        }

        & .about-text {
            display: flex;
            max-height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            margin: calc(var(--card-margin-desktop-top, 0) * 1rem) calc(var(--card-margin-desktop-right, 0) * 1rem) calc(var(--card-margin-desktop-bottom, 0) * 1rem) calc(var(--card-margin-desktop-left, 0) * 1rem);
            padding: calc(var(--card-padding-desktop-top, 1.25) * 1rem) calc(var(--card-padding-desktop-right, 1.25) * 1rem) calc(var(--card-padding-desktop-bottom, 1.25) * 1rem) calc(var(--card-padding-desktop-left, 1.25) * 1rem);
            border-radius: calc(var(--card-border-desktop-left-radius, 0) * 1rem) calc(var(--card-border-desktop-top-radius, 0) * 1rem) calc(var(--card-border-desktop-right-radius, 0) * 1rem) calc(var(--card-border-desktop-bottom-radius, 0) * 1rem);
            border-width: calc(var(--card-border-desktop-top-width, 0) * 1rem) calc(var(--card-border-desktop-right-width, 0) * 1rem) calc(var(--card-border-desktop-bottom-width, 0) * 1rem) calc(var(--card-border-desktop-left-width, 0) * 1rem);

            flex-direction: row;
            justify-content: var(--card-flexbox-desktop-justifyContent, center);
            align-items: var(--card-flexbox-desktop-alignItems, center);
            justify-self: var(--card-flexbox-desktop-justifySelf, auto);
            align-content: flex-start;
            flex-wrap: var(--card-flexbox-desktop-flexWrap, wrap);
            gap: calc(var(--card-flexbox-desktop-columnGap, 1) * 1rem) calc(var(--card-flexbox-desktop-rowGap, 0) * 1rem);
        }

        & .about-us-btn {
            text-decoration: none;
            text-align: var(--button-font-desktop-textAlign, center);
            font-size: calc(var(--button-font-desktop-fontSize, 1.125) * 1rem);
            line-height: var(--button-font-desktop-lineHeight, 1);
            border-radius: calc(var(--button-border-desktop-left-radius, 4) * 1rem) calc(var(--button-border-desktop-top-radius, 4) * 1rem) calc(var(--button-border-desktop-right-radius, 4) * 1rem) calc(var(--button-border-desktop-bottom-radius, 4) * 1rem);
            border-width: calc(var(--button-border-desktop-top-width, 0) * 1rem) calc(var(--button-border-desktop-right-width, 0) * 1rem) calc(var(--button-border-desktop-bottom-width, 0) * 1rem) calc(var(--button-border-desktop-left-width, 0) * 1rem);
            padding: calc(var(--button-padding-desktop-top, 0.5) * 1rem) calc(var(--button-padding-desktop-right, 1.25) * 1rem) calc(var(--button-padding-desktop-bottom, 0.5) * 1rem) calc(var(--button-padding-desktop-left, 1.25) * 1rem);
            margin: calc(var(--button-margin-desktop-top, 0) * 1rem) calc(var(--button-margin-desktop-right, 0) * 1rem) calc(var(--button-margin-desktop-bottom, 0) * 1rem) calc(var(--button-margin-desktop-left, 0) * 1rem);

            &:hover {
                color: var(--button-font-hover-desktop-textColorHover, var(--global-color-0));
            }
        }
    }
}