/* =========================================================
   ZAN PEARL TOURS & SAFARI
   PREMIUM ABOUT PAGE
========================================================= */

.zpa-page{
    --navy:#052b4f;
    --navy-deep:#031d35;
    --blue:#079fd3;
    --cyan:#10c4df;
    --gold:#f6b91c;
    --gold-soft:#ffd65a;
    --text:#17344d;
    --muted:#687b8d;
    --line:#e3ebf0;
    --soft:#f5fafc;

    overflow:hidden;
    background:#fff;
    color:var(--text);
    font-family:'Manrope',sans-serif;
}

.zpa-page *,
.zpa-page *::before,
.zpa-page *::after{
    box-sizing:border-box;
}

.zpa-container{
    width:min(1280px,calc(100% - 60px));
    margin:0 auto;
}

.zpa-eyebrow{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:20px;
    color:#087fb5;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.8px;
}

.zpa-eyebrow > span{
    display:block;
    width:35px;
    height:2px;
    background:var(--gold);
}

.zpa-eyebrow-light{
    color:#fff;
}


/* =========================================================
   HERO
========================================================= */

.zpa-hero{
    position:relative;
    min-height:670px;
    display:flex;
    align-items:center;
    background:var(--navy-deep);
    isolation:isolate;
}

.zpa-hero-media,
.zpa-hero-overlay{
    position:absolute;
    inset:0;
}

.zpa-hero-media{
    z-index:-3;
}

.zpa-hero-media img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.zpa-hero-overlay{
    z-index:-2;
    background:
        linear-gradient(
            90deg,
            rgba(2,25,47,.94) 0%,
            rgba(2,31,57,.82) 43%,
            rgba(2,31,57,.35) 72%,
            rgba(2,31,57,.22) 100%
        ),
        linear-gradient(
            0deg,
            rgba(2,28,50,.42),
            transparent 55%
        );
}

.zpa-hero-content{
    position:relative;
    z-index:2;
    min-height:670px;
    padding:90px 0 130px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
}

.zpa-hero-copy{
    max-width:760px;
}

.zpa-hero-copy h1{
    max-width:760px;
    margin:0;
    color:#fff;
    font-size:70px;
    line-height:1.03;
    letter-spacing:-4px;
    font-weight:800;
}

.zpa-hero-copy h1 span{
    display:block;
    color:var(--gold-soft);
}

.zpa-hero-copy > p{
    max-width:650px;
    margin:25px 0 0;
    color:rgba(255,255,255,.78);
    font-size:15px;
    line-height:1.9;
}

.zpa-hero-actions{
    margin-top:34px;
    display:flex;
    align-items:center;
    gap:12px;
}

.zpa-btn{
    min-height:54px;
    padding:0 24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    border-radius:8px;
    text-decoration:none;
    font-size:12px;
    font-weight:800;
    transition:.25s ease;
}

.zpa-btn-gold{
    background:var(--gold);
    color:#062b4c;
    box-shadow:0 12px 30px rgba(246,185,28,.20);
}

.zpa-btn-gold:hover{
    background:#ffd34d;
    color:#062b4c;
    transform:translateY(-2px);
}

.zpa-btn-outline{
    border:1px solid rgba(255,255,255,.40);
    color:#fff;
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(8px);
}

.zpa-btn-outline:hover{
    background:#fff;
    color:var(--navy);
}

.zpa-hero-card{
    width:255px;
    flex:0 0 255px;
    padding:28px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:18px;
    background:rgba(3,37,65,.56);
    backdrop-filter:blur(15px);
    box-shadow:0 25px 60px rgba(0,0,0,.18);
}

.zpa-hero-card-icon{
    width:52px;
    height:52px;
    margin-bottom:25px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--gold);
    color:var(--navy);
    font-size:20px;
}

.zpa-hero-card small{
    display:block;
    color:rgba(255,255,255,.55);
    font-size:9px;
    font-weight:800;
    letter-spacing:1.8px;
}

.zpa-hero-card strong{
    display:block;
    margin-top:7px;
    color:#fff;
    font-size:22px;
    line-height:1.3;
}

.zpa-hero-card p{
    margin:15px 0 0;
    color:rgba(255,255,255,.65);
    font-size:10px;
    line-height:1.7;
}

.zpa-hero-strip{
    position:absolute;
    z-index:5;
    left:0;
    right:0;
    bottom:0;
    background:rgba(2,36,63,.84);
    backdrop-filter:blur(14px);
    border-top:1px solid rgba(255,255,255,.13);
}

.zpa-hero-strip-grid{
    min-height:82px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.zpa-hero-strip-grid > div{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    border-right:1px solid rgba(255,255,255,.11);
    color:#fff;
    font-size:11px;
    font-weight:700;
}

.zpa-hero-strip-grid > div:last-child{
    border-right:0;
}

.zpa-hero-strip-grid i{
    color:var(--gold);
    font-size:17px;
}


/* =========================================================
   STORY
========================================================= */

.zpa-story{
    position:relative;
    padding:120px 0;
    background:#fff;
}

.zpa-story-grid{
    display:grid;
    grid-template-columns:minmax(0,.95fr) minmax(0,1fr);
    gap:100px;
    align-items:center;
}

.zpa-story-visual{
    position:relative;
    min-height:600px;
}

.zpa-story-main{
    position:absolute;
    left:0;
    top:0;
    width:82%;
    height:520px;
    overflow:hidden;
    border-radius:12px 110px 12px 12px;
    box-shadow:0 30px 70px rgba(3,45,78,.15);
}

.zpa-story-main img,
.zpa-story-small img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.zpa-story-small{
    position:absolute;
    right:0;
    bottom:0;
    width:48%;
    height:285px;
    padding:8px;
    overflow:hidden;
    border-radius:14px;
    background:#fff;
    box-shadow:0 20px 45px rgba(3,45,78,.18);
}

.zpa-story-small img{
    border-radius:8px;
}

.zpa-story-badge{
    position:absolute;
    left:35px;
    bottom:18px;
    min-width:215px;
    min-height:88px;
    padding:15px 20px;
    display:flex;
    align-items:center;
    gap:14px;
    border-radius:12px;
    background:var(--navy);
    color:#fff;
    box-shadow:0 18px 35px rgba(3,37,65,.24);
}

.zpa-story-badge > span{
    width:45px;
    height:45px;
    flex:0 0 45px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--gold);
    color:var(--navy);
}

.zpa-story-badge strong,
.zpa-story-badge small{
    display:block;
}

.zpa-story-badge strong{
    font-size:14px;
}

.zpa-story-badge small{
    margin-top:3px;
    color:rgba(255,255,255,.65);
    font-size:9px;
}

.zpa-story-content h2,
.zpa-section-heading h2,
.zpa-values-intro h2{
    margin:0;
    color:var(--navy);
    font-size:49px;
    line-height:1.1;
    letter-spacing:-2.6px;
    font-weight:800;
}

.zpa-story-content h2 span,
.zpa-section-heading h2 span,
.zpa-values-intro h2 span{
    display:block;
    color:var(--blue);
}

.zpa-story-content p{
    color:var(--muted);
    font-size:13px;
    line-height:1.9;
}

.zpa-story-lead{
    margin-top:26px;
    color:#344e64 !important;
    font-size:15px !important;
    font-weight:500;
}

.zpa-story-points{
    margin-top:27px;
    padding:24px 0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 20px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.zpa-story-points > div{
    display:flex;
    align-items:center;
    gap:10px;
}

.zpa-story-points span{
    width:27px;
    height:27px;
    flex:0 0 27px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#e9f8fc;
    color:var(--blue);
    font-size:10px;
}

.zpa-story-points strong{
    color:#26445c;
    font-size:11px;
}

.zpa-text-link{
    margin-top:28px;
    display:inline-flex;
    align-items:center;
    gap:14px;
    color:var(--navy);
    text-decoration:none;
    font-size:12px;
    font-weight:800;
}

.zpa-text-link span{
    width:37px;
    height:37px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--gold);
    transition:.25s;
}

.zpa-text-link:hover span{
    transform:translateX(4px);
}


/* =========================================================
   PURPOSE
========================================================= */

.zpa-purpose{
    position:relative;
    padding:100px 0;
    background:
        radial-gradient(circle at 90% 10%,rgba(13,166,215,.16),transparent 30%),
        linear-gradient(135deg,#052e54,#031e39);
    color:#fff;
}

.zpa-purpose-heading{
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:80px;
    align-items:end;
    margin-bottom:55px;
}

.zpa-purpose-heading h2{
    max-width:700px;
    margin:0;
    color:#fff;
    font-size:49px;
    line-height:1.1;
    letter-spacing:-2.5px;
}

.zpa-purpose-heading h2 span{
    display:block;
    color:var(--gold-soft);
}

.zpa-purpose-heading > p{
    margin:0;
    color:rgba(255,255,255,.65);
    font-size:12px;
    line-height:1.9;
}

.zpa-purpose-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.zpa-purpose-card{
    position:relative;
    min-height:315px;
    padding:34px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px;
    background:rgba(255,255,255,.055);
    transition:.3s ease;
}

.zpa-purpose-card:hover{
    transform:translateY(-6px);
    background:rgba(255,255,255,.09);
}

.zpa-purpose-card-featured{
    background:rgba(8,151,202,.18);
    border-color:rgba(30,193,226,.28);
}

.zpa-purpose-number{
    position:absolute;
    right:25px;
    top:20px;
    color:rgba(255,255,255,.09);
    font-size:55px;
    font-weight:800;
}

.zpa-purpose-icon{
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:var(--gold);
    color:var(--navy);
    font-size:21px;
}

.zpa-purpose-card h3{
    margin:50px 0 12px;
    color:#fff;
    font-size:20px;
}

.zpa-purpose-card p{
    margin:0;
    color:rgba(255,255,255,.65);
    font-size:11px;
    line-height:1.9;
}


/* =========================================================
   SERVICES
========================================================= */

.zpa-services{
    padding:115px 0;
    background:#f7fafc;
}

.zpa-section-heading{
    margin-bottom:50px;
    display:grid;
    grid-template-columns:1.1fr .7fr;
    gap:80px;
    align-items:end;
}

.zpa-section-heading > p{
    margin:0;
    color:var(--muted);
    font-size:12px;
    line-height:1.9;
}

.zpa-services-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:20px;
}

.zpa-service{
    text-decoration:none;
}

.zpa-service-large{
    position:relative;
    min-height:570px;
    overflow:hidden;
    border-radius:18px;
    color:#fff;
    background:var(--navy);
}

.zpa-service-large > img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s ease;
}

.zpa-service-large:hover > img{
    transform:scale(1.04);
}

.zpa-service-shade{
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,rgba(2,28,51,.93),rgba(2,28,51,.05) 70%);
}

.zpa-service-top{
    position:absolute;
    right:25px;
    top:22px;
    color:#fff;
    font-size:11px;
    font-weight:800;
}

.zpa-service-content{
    position:absolute;
    z-index:3;
    left:38px;
    right:38px;
    bottom:38px;
}

.zpa-service-content > span,
.zpa-service-small span{
    color:var(--gold-soft);
    font-size:9px;
    font-weight:800;
    letter-spacing:1.5px;
}

.zpa-service-content h3{
    margin:8px 0;
    color:#fff;
    font-size:35px;
}

.zpa-service-content p{
    max-width:500px;
    color:rgba(255,255,255,.70);
    font-size:11px;
    line-height:1.8;
}

.zpa-service-link{
    margin-top:20px;
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
    font-size:11px;
    font-weight:800;
}

.zpa-services-side{
    display:grid;
    grid-template-rows:1fr 1fr auto;
    gap:15px;
}

.zpa-service-small{
    position:relative;
    padding:32px;
    display:grid;
    grid-template-columns:65px 1fr auto;
    align-items:center;
    gap:20px;
    border-radius:16px;
    background:#fff;
    border:1px solid #e5edf1;
    box-shadow:0 13px 35px rgba(4,50,83,.06);
    transition:.25s;
}

.zpa-service-small:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(4,50,83,.11);
}

.zpa-service-solid-icon{
    width:62px;
    height:62px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#e9f8fc;
    color:var(--blue);
    font-size:23px;
}

.zpa-service-small h3{
    margin:5px 0 6px;
    color:var(--navy);
    font-size:19px;
}

.zpa-service-small p{
    margin:0;
    color:var(--muted);
    font-size:10px;
    line-height:1.7;
}

.zpa-service-small span{
    color:#b98500;
}

.zpa-service-arrow{
    color:var(--navy);
    font-size:13px;
}

.zpa-service-safari .zpa-service-solid-icon{
    background:#fff6da;
    color:#b98500;
}

.zpa-service-note{
    padding:22px 27px;
    display:flex;
    align-items:center;
    gap:17px;
    border-radius:15px;
    background:var(--navy);
    color:#fff;
}

.zpa-service-note > i{
    color:var(--gold);
    font-size:24px;
}

.zpa-service-note p{
    margin:0;
    color:rgba(255,255,255,.68);
    font-size:10px;
    line-height:1.7;
}

.zpa-service-note strong{
    display:block;
    color:#fff;
}


/* =========================================================
   VALUES
========================================================= */

.zpa-values{
    padding:110px 0;
    background:#fff;
}

.zpa-values-intro{
    max-width:700px;
    margin-bottom:50px;
}

.zpa-values-list{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.zpa-values-list article{
    position:relative;
    min-height:310px;
    padding:36px 28px;
    border-right:1px solid var(--line);
    transition:.25s;
}

.zpa-values-list article:last-child{
    border-right:0;
}

.zpa-values-list article:hover{
    background:#f7fbfd;
}

.zpa-value-no{
    position:absolute;
    right:22px;
    top:24px;
    color:#b8c5ce;
    font-size:10px;
    font-weight:800;
}

.zpa-value-icon{
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:var(--navy);
    color:var(--gold);
    font-size:21px;
}

.zpa-values-list h3{
    margin:55px 0 12px;
    color:var(--navy);
    font-size:17px;
}

.zpa-values-list p{
    margin:0;
    color:var(--muted);
    font-size:10px;
    line-height:1.85;
}


/* =========================================================
   DESTINATION
========================================================= */

.zpa-destination{
    position:relative;
    min-height:580px;
    display:flex;
    align-items:center;
    isolation:isolate;
}

.zpa-destination-media,
.zpa-destination-overlay{
    position:absolute;
    inset:0;
}

.zpa-destination-media{
    z-index:-3;
}

.zpa-destination-media img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.zpa-destination-overlay{
    z-index:-2;
    background:linear-gradient(90deg,rgba(2,28,51,.93),rgba(2,28,51,.55),rgba(2,28,51,.12));
}

.zpa-destination-content{
    padding:90px 0;
}

.zpa-destination-small{
    color:var(--gold-soft);
    font-size:10px;
    font-weight:800;
    letter-spacing:2px;
}

.zpa-destination h2{
    max-width:750px;
    margin:17px 0;
    color:#fff;
    font-size:57px;
    line-height:1.08;
    letter-spacing:-3px;
}

.zpa-destination h2 span{
    display:block;
    color:var(--gold-soft);
}

.zpa-destination p{
    max-width:570px;
    margin:0 0 30px;
    color:rgba(255,255,255,.72);
    font-size:12px;
    line-height:1.9;
}


/* =========================================================
   FINAL CTA
========================================================= */

.zpa-final{
    padding:90px 0;
    background:#f7fafc;
}

.zpa-final-grid{
    display:grid;
    grid-template-columns:1fr .8fr;
    gap:100px;
    align-items:center;
}

.zpa-final h2{
    margin:0;
    color:var(--navy);
    font-size:49px;
    line-height:1.1;
    letter-spacing:-2.5px;
}

.zpa-final h2 span{
    display:block;
    color:var(--blue);
}

.zpa-final-right > p{
    margin:0;
    color:var(--muted);
    font-size:12px;
    line-height:1.9;
}

.zpa-final-actions{
    margin-top:27px;
    display:flex;
    align-items:center;
    gap:25px;
}

.zpa-whatsapp{
    min-height:62px;
    padding:8px 22px 8px 12px;
    display:flex;
    align-items:center;
    gap:13px;
    border-radius:50px;
    background:var(--navy);
    color:#fff;
    text-decoration:none;
}

.zpa-whatsapp > i{
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#25D366;
    font-size:20px;
}

.zpa-whatsapp small,
.zpa-whatsapp strong{
    display:block;
}

.zpa-whatsapp small{
    color:rgba(255,255,255,.55);
    font-size:7px;
    letter-spacing:1px;
}

.zpa-whatsapp strong{
    margin-top:3px;
    font-size:11px;
}

.zpa-contact-link{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--navy);
    font-size:11px;
    font-weight:800;
    text-decoration:none;
}


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

@media(max-width:1050px){

    .zpa-hero-copy h1{
        font-size:58px;
    }

    .zpa-story-grid{
        gap:55px;
    }

    .zpa-story-content h2,
    .zpa-section-heading h2,
    .zpa-values-intro h2,
    .zpa-purpose-heading h2,
    .zpa-final h2{
        font-size:42px;
    }

    .zpa-values-list{
        grid-template-columns:repeat(2,1fr);
    }

    .zpa-values-list article:nth-child(2){
        border-right:0;
    }

    .zpa-values-list article:nth-child(-n+2){
        border-bottom:1px solid var(--line);
    }
}


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

@media(max-width:800px){

    .zpa-container{
        width:calc(100% - 34px);
    }

    .zpa-hero,
    .zpa-hero-content{
        min-height:650px;
    }

    .zpa-hero-content{
        padding:70px 0 130px;
    }

    .zpa-hero-card{
        display:none;
    }

    .zpa-hero-copy h1{
        font-size:48px;
        letter-spacing:-2.5px;
    }

    .zpa-hero-strip-grid{
        grid-template-columns:repeat(2,1fr);
        padding:10px 0;
    }

    .zpa-hero-strip-grid > div{
        min-height:35px;
        border-right:0;
        justify-content:flex-start;
        padding-left:15px;
    }

    .zpa-story{
        padding:75px 0;
    }

    .zpa-story-grid{
        grid-template-columns:1fr;
        gap:55px;
    }

    .zpa-story-visual{
        max-width:600px;
        width:100%;
        margin:auto;
    }

    .zpa-purpose-heading,
    .zpa-section-heading,
    .zpa-final-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .zpa-purpose-grid{
        grid-template-columns:1fr;
    }

    .zpa-purpose-card{
        min-height:auto;
    }

    .zpa-purpose-card h3{
        margin-top:35px;
    }

    .zpa-services-grid{
        grid-template-columns:1fr;
    }

    .zpa-service-large{
        min-height:500px;
    }

    .zpa-final-grid{
        gap:35px;
    }
}


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

@media(max-width:560px){

    .zpa-hero,
    .zpa-hero-content{
        min-height:600px;
    }

    .zpa-hero-content{
        padding:55px 0 125px;
    }

    .zpa-hero-copy h1{
        font-size:39px;
        line-height:1.08;
        letter-spacing:-2px;
    }

    .zpa-hero-copy > p{
        font-size:12px;
        line-height:1.8;
    }

    .zpa-hero-actions{
        align-items:stretch;
        flex-direction:column;
    }

    .zpa-btn{
        width:100%;
    }

    .zpa-hero-strip-grid{
        font-size:9px;
    }

    .zpa-hero-strip-grid > div{
        font-size:8px;
        gap:7px;
    }

    .zpa-hero-strip-grid i{
        font-size:12px;
    }

    .zpa-story-visual{
        min-height:445px;
    }

    .zpa-story-main{
        width:88%;
        height:370px;
        border-radius:10px 65px 10px 10px;
    }

    .zpa-story-small{
        width:52%;
        height:190px;
    }

    .zpa-story-badge{
        left:12px;
        bottom:3px;
        min-width:185px;
        min-height:75px;
    }

    .zpa-story-content h2,
    .zpa-section-heading h2,
    .zpa-values-intro h2,
    .zpa-purpose-heading h2,
    .zpa-final h2{
        font-size:34px;
        letter-spacing:-1.5px;
    }

    .zpa-story-points{
        grid-template-columns:1fr;
    }

    .zpa-purpose,
    .zpa-services,
    .zpa-values,
    .zpa-final{
        padding:70px 0;
    }

    .zpa-purpose-card{
        padding:28px;
    }

    .zpa-service-large{
        min-height:430px;
    }

    .zpa-service-content{
        left:25px;
        right:25px;
        bottom:25px;
    }

    .zpa-service-content h3{
        font-size:27px;
    }

    .zpa-service-small{
        padding:22px;
        grid-template-columns:52px 1fr auto;
        gap:13px;
    }

    .zpa-service-solid-icon{
        width:50px;
        height:50px;
        font-size:18px;
    }

    .zpa-values-list{
        grid-template-columns:1fr;
    }

    .zpa-values-list article{
        min-height:auto;
        border-right:0;
        border-bottom:1px solid var(--line);
    }

    .zpa-values-list article:last-child{
        border-bottom:0;
    }

    .zpa-values-list h3{
        margin-top:35px;
    }

    .zpa-destination{
        min-height:520px;
    }

    .zpa-destination h2{
        font-size:39px;
        letter-spacing:-2px;
    }

    .zpa-final-actions{
        align-items:flex-start;
        flex-direction:column;
    }
}