/* Hero 1 ---------- */

.z-about-hero1 {
    width: 53%;
    height: calc(100vh - 120px);
    padding: 0 0 40px;
}

.z-about-hero1-c {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.z-about-hero1 h5 {
    margin: 20px 0 0;
}

.z-about-hero1-c div {
    width: 80%;
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
}

.z-about-hero1-c img {
    width: 40px;
}


@media screen and (max-width: 1128px) {
    .z-about-hero1 {
        width: 90%;
        height: 65vh;
        padding: 0;
    }
}

@media screen and (max-width: 560px) {
    .z-about-hero1 {
        height: fit-content;
        padding: 80px 0 120px;
    }

    .z-about-hero1-c img {
        width: 35px;
    }
}



/* Hero 2 ---------- */

.z-about-hero2 {
    height: fit-content;
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}



/* Feature - Common Setup ----- */

.z-about-feature-c {
    position: relative;
    width: 53%;
    height: fit-content;
    margin: 70px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

@media screen and (max-width: 1128px) {
    .z-about-feature-c {
        width: 90%;
    }
}

.z-about-feature-c div:first-of-type {
    width: 100%;
    padding: 40px;
    margin-bottom: 8px;
    background: #ffffff79;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.z-about-feature-c div:last-of-type {
    width: 100%;
    padding: 40px;
    margin-bottom: 8px;
    background: #ffffffab;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

@media screen and (max-width: 560px) {
    .z-about-feature-c div:first-of-type,
    .z-about-feature-c div:last-of-type {
        padding: 5vw;
    }
}

/* Messaging - Image */
.zafmi { /*z-about-feature-msg-c img*/
    width: 50%;
    height: auto; 
}

/* Representative Image - Image */
.zafri {
    width: 388px;
    height: auto; 
}

@media screen and (max-width: 560px) {
    .zafmi,
    .zafri {
        width: 100%;
    }
}

.z-about-feature-c h3,
.z-about-feature-msg-c h3 {
    margin: 20px 0 28px;
}



/* Hero - Callout ---------- */

.z-about-callout-bg {
    position: relative;
    width: 100%;
    background: #22304B ;
}

.z-about-callout-c {
    width: 43%;
    margin: auto;
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.z-about-callout-c h5 {
    color: white;
    font-weight: 400;
}

.z-about-callout-c p {
    color: #bbb;
    margin: 15px 0 22px;
    text-align: center;
}

.z-about-callout-service {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
}

.z-about-callout-service div {
    z-index: 1;
    width: 130px;
    padding: 20px;
    background: #424d64;
    border: 1px solid #ccc;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
}

.z-about-callout-service div img {
    width: 30px;
}

.z-about-callout-service div a {
    color: #ccc;
}

.z-about-callout-service div a:hover {
    color: white;
    text-decoration: underline;
    transition: 0.6s ease;

}

@media screen and (max-width: 1128px) {
    .z-about-callout-c {
        width: 90%;
    }
}

@media screen and (max-width: 560px) {
    .z-about-callout-service {
        width: 100%;
        flex-direction: column;
    }

    .z-about-callout-service div {
        width: 100%;
        padding: 5px 106px;
        flex-direction: row;
        justify-content: flex-start;
    }
}



/* Fonts & Misc ---------- */

.z-about-icon {
    width: 50px;
}

.z-about-privacy-quote {
    width: 100%;
    padding: 20px;
    background: #ffffff79;
    border-radius: 2px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}