/* =========================================================
   ZAN PEARL - ABOUT SECTION
========================================================= */

.zp-about{
    width:100%;
    padding:100px 0;
    overflow:hidden;
    background:#ffffff;
}

.zp-about-container{
    width:min(1360px,calc(100% - 60px));
    margin:0 auto;

    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);

    align-items:center;
    gap:72px;
}


/* =========================================================
   LEFT VISUAL
========================================================= */

.zp-about-visual{
    position:relative;
    min-height:570px;
}


/* MAIN IMAGE */

.zp-about-main-image{
    position:absolute;

    top:0;
    left:0;

    width:70%;
    height:490px;

    overflow:hidden;

    border-radius:
        24px
        110px
        24px
        24px;

    background:#e9f1f5;
}

.zp-about-main-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .7s ease;
}

.zp-about:hover
.zp-about-main-image img{
    transform:scale(1.04);
}


/* COMPASS DECORATION */

.zp-about-pattern{
    position:absolute;

    top:30px;
    right:5%;

    width:190px;
    height:190px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#D6A529;

    font-size:170px;

    opacity:.18;

    z-index:0;
}


/* SECOND IMAGE */

.zp-about-small-image{
    position:absolute;

    right:0;
    bottom:0;

    width:53%;
    height:335px;

    overflow:hidden;

    border:
        8px solid
        #ffffff;

    border-radius:
        20px
        20px
        20px
        20px;

    background:#e9f1f5;

    box-shadow:
        0 20px 45px
        rgba(0,39,85,.13);

    z-index:3;
}

.zp-about-small-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .7s ease;
}

.zp-about:hover
.zp-about-small-image img{
    transform:scale(1.05);
}


/* EXPERIENCE BADGE */

.zp-about-experience{
    position:absolute;

    left:36px;
    bottom:0;

    min-width:250px;
    min-height:105px;

    padding:20px 24px;

    display:flex;
    align-items:center;

    gap:16px;

    background:#002755;

    border-radius:
        0
        18px
        0
        0;

    color:#ffffff;

    z-index:5;

    box-shadow:
        0 14px 35px
        rgba(0,39,85,.16);
}

.zp-experience-icon{
    width:53px;
    height:53px;

    flex:none;

    display:flex;
    align-items:center;
    justify-content:center;

    border:
        1px solid
        rgba(214,165,41,.55);

    border-radius:50%;

    color:#D6A529;

    font-size:22px;
}

.zp-about-experience strong{
    display:block;

    color:#ffffff;

    font-family:'Manrope',sans-serif;

    font-size:22px;
    line-height:1.1;

    font-weight:800;
}

.zp-about-experience span{
    display:block;

    margin-top:6px;

    color:#dbe6ee;

    font-size:11px;
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.zp-about-content{
    position:relative;
    z-index:5;
}


/* SMALL LABEL */

.zp-about-label{
    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:20px;

    padding:9px 14px;

    border:
        1px solid
        rgba(214,165,41,.28);

    border-radius:9px;

    background:#fff9ec;

    color:#C68E13;

    font-size:10px;
    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1px;
}

.zp-about-label i{
    color:#D6A529;
}


/* TITLE */

.zp-about-content h2{
    max-width:650px;

    margin:0;

    color:#102C47;

    font-family:'Manrope',sans-serif;

    font-size:54px;

    line-height:1.12;

    letter-spacing:-2.5px;

    font-weight:800;
}

.zp-about-content h2 span{
    color:#D6A529;
}


/* DESCRIPTION */

.zp-about-description{
    max-width:670px;

    margin:
        24px
        0
        30px;

    color:#687B88;

    font-size:14px;

    line-height:1.85;
}


/* =========================================================
   FEATURES
========================================================= */

.zp-about-features{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:30px;

    padding:
        28px
        0
        32px;

    border-top:
        1px solid
        #E5EBEE;

    border-bottom:
        1px solid
        #E5EBEE;
}

.zp-about-feature{
    display:flex;

    align-items:flex-start;

    gap:16px;
}

.zp-feature-icon{
    width:58px;
    height:58px;

    flex:none;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:14px;

    background:#F1F6F8;

    color:#006CB7;

    font-size:22px;

    transition:.3s ease;
}

.zp-about-feature:hover
.zp-feature-icon{
    background:#002755;

    color:#D6A529;

    transform:translateY(-3px);
}

.zp-about-feature h3{
    margin:
        2px
        0
        7px;

    color:#102C47;

    font-family:'Manrope',sans-serif;

    font-size:17px;

    line-height:1.3;

    font-weight:800;
}

.zp-about-feature p{
    margin:0;

    color:#73848F;

    font-size:11px;

    line-height:1.75;
}


/* =========================================================
   BOTTOM
========================================================= */

.zp-about-bottom{
    padding-top:30px;

    display:flex;

    align-items:center;

    gap:28px;
}


/* BUTTON */

.zp-about-button{
    min-height:58px;

    padding:
        5px
        6px
        5px
        24px;

    display:inline-flex;

    align-items:center;

    gap:20px;

    border-radius:50px;

    background:#002755;

    color:#ffffff;

    font-size:12px;

    font-weight:800;

    box-shadow:
        0 10px 25px
        rgba(0,39,85,.16);

    transition:.3s ease;
}

.zp-about-button-icon{
    width:46px;
    height:46px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#D6A529;

    color:#002755;

    transition:.3s ease;
}

.zp-about-button:hover{
    background:#006CB7;

    color:#ffffff;

    transform:translateY(-2px);
}

.zp-about-button:hover
.zp-about-button-icon{
    background:#F1D46E;

    transform:rotate(-35deg);
}


/* BRAND */

.zp-about-brand{
    display:flex;

    align-items:center;

    gap:12px;
}

.zp-brand-icon{
    width:48px;
    height:48px;

    display:flex;

    align-items:center;
    justify-content:center;

    border:
        1px solid
        #D6A529;

    border-radius:50%;

    color:#006CB7;

    font-size:18px;
}

.zp-about-brand strong{
    display:block;

    color:#102C47;

    font-family:'Manrope',sans-serif;

    font-size:14px;

    font-weight:800;
}

.zp-about-brand span{
    display:block;

    margin-top:3px;

    color:#83919A;

    font-size:9px;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

    .zp-about-container{
        gap:45px;
    }

    .zp-about-content h2{
        font-size:44px;
    }

    .zp-about-visual{
        min-height:520px;
    }

    .zp-about-main-image{
        height:440px;
    }

    .zp-about-small-image{
        height:300px;
    }

}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media(max-width:850px){

    .zp-about{
        padding:70px 0;
    }

    .zp-about-container{
        grid-template-columns:1fr;

        gap:60px;
    }

    .zp-about-visual{
        width:100%;
        max-width:650px;

        margin:0 auto;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .zp-about{
        padding:55px 0 65px;
    }

    .zp-about-container{
        width:calc(100% - 30px);

        gap:45px;
    }


    .zp-about-visual{
        min-height:440px;
    }

    .zp-about-main-image{
        width:82%;
        height:355px;

        border-radius:
            18px
            70px
            18px
            18px;
    }

    .zp-about-pattern{
        width:120px;
        height:120px;

        font-size:110px;
    }

    .zp-about-small-image{
        width:58%;
        height:225px;

        border-width:5px;
    }

    .zp-about-experience{
        left:12px;

        min-width:190px;
        min-height:82px;

        padding:14px 16px;
    }

    .zp-experience-icon{
        width:43px;
        height:43px;

        font-size:17px;
    }

    .zp-about-experience strong{
        font-size:17px;
    }


    .zp-about-content h2{
        font-size:36px;

        letter-spacing:-1.5px;
    }

    .zp-about-description{
        margin-top:18px;

        font-size:12px;
    }


    .zp-about-features{
        grid-template-columns:1fr;

        gap:24px;
    }


    .zp-about-bottom{
        flex-wrap:wrap;
    }

}