/* =========================================================
   ZANZI STROLL - POPULAR SAFARIS
========================================================= */

:root{
    --zs-deep:#003B69;
    --zs-blue:#00518A;
    --zs-ocean:#0870AF;

    --zs-gold:#F5A000;
    --zs-gold-light:#FFB515;

    --zs-white:#FFFFFF;
    --zs-dark:#022B4D;
    --zs-muted:#687D8D;
    --zs-border:#DCE6EE;
}


/* =========================================================
   SECTION
========================================================= */

.zp-safaris{
    width:100%;

    padding:90px 0 100px;

    background:#ffffff;

    color:var(--zs-dark);
}

.zp-safaris-container{
    width:min(1380px,calc(100% - 60px));

    margin:0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.zp-safari-heading{
    margin-bottom:40px;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:50px;
}

.zp-safari-label{
    display:inline-block;

    margin-bottom:9px;

    padding:7px 11px;

    border-radius:7px;

    background:#FFF4DC;

    color:var(--zs-gold);

    font-size:9px;
    font-weight:900;

    letter-spacing:1.3px;

    text-transform:uppercase;
}

.zp-safari-heading h2{
    margin:0;

    color:var(--zs-deep);

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

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

    letter-spacing:-2px;

    font-weight:800;
}

.zp-safari-heading h2 span{
    color:var(--zs-gold);
}

.zp-safari-heading-right{
    max-width:430px;
}

.zp-safari-heading-right p{
    margin:0;

    color:var(--zs-muted);

    font-size:11px;

    line-height:1.75;
}

.zp-safari-heading-right a{
    display:inline-flex;

    align-items:center;

    gap:7px;

    margin-top:12px;

    color:var(--zs-deep);

    font-size:9px;

    font-weight:900;
}

.zp-safari-heading-right a i{
    color:var(--zs-gold);
}


/* =========================================================
   GRID
========================================================= */

.zp-safari-grid{
    display:grid;

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

    gap:24px;
}


/* =========================================================
   CARD
========================================================= */

.zp-safari-card{
    min-width:0;

    overflow:hidden;

    border-radius:17px;

    background:#fff;

    border:
        1px solid
        #DCE6EE;

    box-shadow:
        0 12px 35px
        rgba(0,59,105,.07);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.zp-safari-card:hover{
    transform:translateY(-6px);

    box-shadow:
        0 20px 48px
        rgba(0,59,105,.14);
}


/* =========================================================
   IMAGE
========================================================= */

.zp-safari-image{
    position:relative;

    width:100%;
    height:250px;

    display:block;

    overflow:hidden;

    border-radius:
        17px
        17px
        0
        0;

    background:#F6F9FC;
}

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

    display:block;

    object-fit:cover;

    transition:
        transform .55s ease;
}

.zp-safari-card:hover
.zp-safari-image img{
    transform:scale(1.06);
}

.zp-safari-placeholder{
    width:100%;
    height:100%;

    display:flex;

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

    background:
        linear-gradient(
            135deg,
            #F6F9FC,
            #DCE6EE
        );

    color:#687D8D;

    font-size:34px;
}


/* =========================================================
   BADGES
========================================================= */

.zp-safari-featured,
.zp-safari-popular{
    position:absolute;

    z-index:5;

    top:15px;

    padding:7px 11px;

    border-radius:7px;

    font-size:8px;

    font-weight:900;
}

.zp-safari-featured{
    left:15px;

    background:var(--zs-blue);

    color:#fff;
}

.zp-safari-popular{
    left:15px;

    top:48px;

    background:
        linear-gradient(
            135deg,
            var(--zs-gold-light),
            var(--zs-gold)
        );

    color:var(--zs-deep);
}


/* HEART */

.zp-safari-heart{
    position:absolute;

    z-index:5;

    top:15px;
    right:15px;

    width:34px;
    height:34px;

    display:flex;

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

    border-radius:50%;

    background:#fff;

    color:var(--zs-deep);

    font-size:12px;

    box-shadow:
        0 5px 15px
        rgba(0,59,105,.10);
}


/* =========================================================
   META OVER IMAGE
========================================================= */

.zp-safari-image-meta{
    position:absolute;

    z-index:6;

    left:16px;
    right:16px;
    bottom:0;

    min-height:42px;

    padding:0 14px;

    display:flex;

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

    gap:10px;

    border-radius:
        11px
        11px
        0
        0;

    background:
        linear-gradient(
            135deg,
            var(--zs-gold-light),
            var(--zs-gold)
        );

    color:var(--zs-deep);

    font-size:8px;

    font-weight:700;
}

.zp-safari-image-meta span{
    min-width:0;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.zp-safari-image-meta i{
    margin-right:4px;

    color:var(--zs-deep);
}

.zp-safari-meta-divider{
    width:1px;

    height:18px;

    flex:none;

    background:
        rgba(0,59,105,.27);
}


/* =========================================================
   BODY
========================================================= */

.zp-safari-body{
    padding:
        19px
        18px
        20px;
}


/* REVIEWS */

.zp-safari-review{
    display:flex;

    align-items:center;

    gap:11px;

    margin-bottom:12px;
}

.zp-safari-review > span{
    color:#687D8D;

    font-size:8px;
}

.zp-safari-stars{
    display:flex;

    gap:2px;

    color:var(--zs-gold);

    font-size:9px;
}


/* TITLE */

.zp-safari-body h3{
    min-height:58px;

    margin:0;

    color:var(--zs-dark);

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

    font-size:15px;

    line-height:1.48;

    font-weight:800;
}

.zp-safari-body h3 a{
    color:inherit;
}

.zp-safari-body h3 a:hover{
    color:var(--zs-blue);
}


/* =========================================================
   CARD FOOTER
========================================================= */

.zp-safari-footer{
    margin-top:16px;

    padding-top:15px;

    display:flex;

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

    gap:12px;

    border-top:
        1px solid
        var(--zs-border);
}


/* PRICE */

.zp-safari-price{
    min-width:0;
}

.zp-safari-price small{
    display:block;

    margin-bottom:3px;

    color:#687D8D;

    font-size:7px;
}

.zp-safari-price strong{
    color:var(--zs-deep);

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

    font-size:15px;

    line-height:1;

    font-weight:800;
}

.zp-safari-price > span{
    margin-left:2px;

    color:#687D8D;

    font-size:7px;
}


/* BOOK BUTTON */

.zp-safari-book{
    min-height:38px;

    padding:
        0
        5px
        0
        14px;

    display:flex;

    align-items:center;

    gap:10px;

    border:
        1px solid
        var(--zs-blue);

    border-radius:50px;

    color:var(--zs-deep);

    background:#fff;

    font-size:9px;

    font-weight:800;

    transition:.25s;
}

.zp-safari-book > span{
    width:28px;
    height:28px;

    display:flex;

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

    border-radius:50%;

    background:var(--zs-blue);

    color:#fff;

    font-size:8px;

    transition:.25s;
}

.zp-safari-book:hover{
    background:var(--zs-deep);

    border-color:var(--zs-deep);

    color:#fff;
}

.zp-safari-book:hover > span{
    background:var(--zs-gold);

    color:var(--zs-deep);
}


/* =========================================================
   EMPTY
========================================================= */

.zp-safari-empty{
    grid-column:1 / -1;

    padding:45px;

    text-align:center;

    color:#687D8D;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1180px){

    .zp-safari-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

}


@media(max-width:900px){

    .zp-safari-heading{
        align-items:flex-start;

        flex-direction:column;

        gap:15px;
    }

    .zp-safari-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


@media(max-width:620px){

    .zp-safaris{
        padding:65px 0 75px;
    }

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

    .zp-safari-heading h2{
        font-size:33px;

        letter-spacing:-1px;
    }

    .zp-safari-grid{
        grid-template-columns:1fr;
    }

    .zp-safari-image{
        height:255px;
    }

}



/* =========================================================
   ZANZI STROLL - READABILITY AND BRAND FINISH
========================================================= */
.zp-safaris, .zp-safaris button, .zp-safaris a, .zp-safaris span {
    font-family:"Manrope","Inter","Segoe UI",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
.zp-safari-heading-right p {font-size:14px;line-height:1.7;}
.zp-safari-heading-right a {font-size:13px;text-decoration:none;}
.zp-safari-label {font-size:11px;color:#003B69;background:#FFF4DC;}
.zp-safari-featured,.zp-safari-popular {font-size:10px;}
.zp-safari-image-meta {background:#003B69;color:#FFFFFF;font-size:11px;}
.zp-safari-image-meta i {color:#FFB515;}
.zp-safari-meta-divider {background:rgba(255,255,255,.35);}
.zp-safari-review > span {font-size:11px;}
.zp-safari-stars {font-size:12px;}
.zp-safari-body h3,.zp-safari-body h3 a {font-size:17px;line-height:1.45;color:#022B4D;text-decoration:none;}
.zp-safari-body h3 a:hover {color:#00518A;}
.zp-safari-price small {font-size:11px;}
.zp-safari-price strong {font-size:19px;}
.zp-safari-price > span {font-size:11px;}
.zp-safari-book {font-size:12px;text-decoration:none;}
.zp-safari-heart {border:0;cursor:pointer;}
.zp-safari-book:hover {background:#003B69;border-color:#003B69;color:#FFFFFF;}
.zp-safari-book:hover > span {background:#F5A000;color:#022B4D;}
.zp-safaris a:focus-visible,.zp-safaris button:focus-visible {outline:3px solid #F5A000;outline-offset:3px;}
@media(max-width:620px){
 .zp-safari-heading h2 {font-size:33px;}
 .zp-safari-heading-right p {font-size:13px;}
 .zp-safari-image-meta {padding:0 9px;gap:6px;}
 .zp-safari-image-meta span {font-size:10px;}
}