:root{
    /* ZANZI STROLL OFFICIAL BRAND */
    --zp-deep:#003B69;
    --zp-deep-dark:#022B4D;
    --zp-blue:#00518A;
    --zp-blue-light:#0870AF;

    --zp-gold:#F5A000;
    --zp-gold-light:#FFB515;
    --zp-gold-soft:#FFF4DC;

    --zp-text:#243746;
    --zp-muted:#61717D;
    --zp-soft:#F7FAFC;
    --zp-border:#DCE6EE;
    --zp-border-light:#EAF0F4;
    --zp-white:#FFFFFF;
}


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

.popular-tours-section{
    width:100%;

    padding:82px 0 92px;

    background:var(--zp-white);

    color:var(--zp-text);

    font-family:
        'Manrope',
        'Inter',
        'Segoe UI',
        Arial,
        sans-serif;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}


.popular-tours-section .container{
    width:min(1360px,calc(100% - 50px));

    margin:0 auto;
}


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

.popular-heading{
    max-width:760px;

    margin:0 auto 42px;

    text-align:center;
}


.popular-kicker{
    display:block;

    margin-bottom:8px;

    color:var(--zp-gold);

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

    line-height:1.3;

    letter-spacing:1.5px;

    text-transform:uppercase;
}


.popular-heading h2{
    margin:0;

    color:var(--zp-deep);

    font-family:
        'Manrope',
        'Inter',
        'Segoe UI',
        Arial,
        sans-serif;

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

    letter-spacing:-1.5px;

    font-weight:800;
}


.popular-heading p{
    max-width:670px;

    margin:13px auto 0;

    color:var(--zp-muted);

    font-size:15px;
    font-weight:500;

    line-height:1.7;
}


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

.popular-tours-grid{
    display:grid;

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

    gap:22px;
}


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

.popular-tour-card{
    position:relative;

    overflow:hidden;

    min-width:0;

    border:
        1px solid
        var(--zp-border-light);

    border-radius:17px;

    background:var(--zp-white);

    box-shadow:
        0 9px 30px
        rgba(0,59,105,.08);

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


.popular-tour-card:hover{
    transform:translateY(-5px);

    border-color:
        rgba(0,81,138,.18);

    box-shadow:
        0 18px 44px
        rgba(0,59,105,.13);
}


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

.popular-tour-image{
    position:relative;

    display:block;

    width:100%;
    height:218px;

    overflow:hidden;

    background:var(--zp-soft);
}


.popular-tour-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .5s ease;
}


.popular-tour-card:hover
.popular-tour-image img{
    transform:scale(1.055);
}


.popular-image-placeholder{
    width:100%;
    height:100%;

    display:flex;

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

    background:var(--zp-soft);

    color:var(--zp-blue);

    font-size:28px;
}


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

.tour-featured-badge,
.tour-offer-badge{
    position:absolute;

    z-index:4;

    padding:8px 12px;

    border-radius:7px;

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

    font-size:11px;
    line-height:1;

    font-weight:800;
}


.tour-featured-badge{
    top:15px;
    left:15px;

    background:
        linear-gradient(
            135deg,
            var(--zp-deep) 0%,
            var(--zp-blue) 100%
        );

    color:var(--zp-white);

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


.tour-offer-badge{
    top:15px;
    right:15px;

    background:
        linear-gradient(
            135deg,
            var(--zp-gold-light) 0%,
            var(--zp-gold) 100%
        );

    color:var(--zp-deep-dark);

    box-shadow:
        0 5px 14px
        rgba(245,160,0,.18);
}


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

.popular-tour-body{
    position:relative;

    z-index:5;

    margin-top:-19px;

    min-height:205px;

    padding:
        22px
        20px
        20px;

    border-radius:
        18px
        18px
        0
        0;

    background:var(--zp-white);
}


/* =====================================================
   REVIEWS
===================================================== */

.popular-review{
    display:flex;

    align-items:center;

    gap:12px;

    min-height:20px;

    margin-bottom:13px;
}


.popular-review > span{
    color:var(--zp-muted);

    font-size:11px;
    font-weight:600;

    line-height:1.3;
}


.tour-stars{
    display:flex;

    align-items:center;

    gap:3px;

    color:var(--zp-gold);

    font-size:11px;
}


/* =====================================================
   TITLE
===================================================== */

.popular-tour-body h3{
    margin:0;

    min-height:50px;

    color:var(--zp-deep);

    font-family:
        'Manrope',
        'Inter',
        'Segoe UI',
        Arial,
        sans-serif;

    font-size:17px;
    line-height:1.45;

    font-weight:800;
}


.popular-tour-body h3 a{
    color:var(--zp-deep);

    text-decoration:none;

    transition:
        color .2s ease;
}


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


/* =====================================================
   BOTTOM INFO BOX
===================================================== */

.popular-tour-info{
    margin-top:14px;

    padding:
        13px
        14px
        12px;

    border:
        1px solid
        var(--zp-border-light);

    border-radius:10px;

    background:var(--zp-soft);
}


/* =====================================================
   LOCATION + DURATION
===================================================== */

.popular-tour-info > div:first-child{
    display:grid;

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

    align-items:center;

    gap:9px;

    min-height:29px;

    padding-bottom:10px;

    border-bottom:
        1px solid
        var(--zp-border);
}


.popular-tour-info >
div:first-child span{
    min-width:0;

    color:var(--zp-muted);

    font-size:11px;
    font-weight:600;

    line-height:1.45;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}


.popular-tour-info >
div:first-child span:nth-child(2){
    text-align:right;
}


.popular-tour-info i{
    margin-right:5px;

    color:var(--zp-blue);
}


/* =====================================================
   PRICE ROW
===================================================== */

.popular-price-row{
    display:flex;

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

    gap:12px;

    min-height:38px;

    padding-top:10px;
}


.popular-price{
    display:flex;

    align-items:baseline;

    min-width:0;
}


.popular-price small{
    display:none;

    color:var(--zp-muted);

    font-size:11px;
}


.popular-price strong{
    color:var(--zp-deep-dark);

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

    font-size:18px;
    line-height:1;

    font-weight:900;
}


.popular-price > span{
    margin-left:4px;

    color:var(--zp-muted);

    font-size:11px;
    font-weight:600;
}


/* =====================================================
   HEART
===================================================== */

.popular-heart{
    width:32px;
    height:32px;

    flex:none;

    display:flex;

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

    padding:0;

    border:
        1px solid
        var(--zp-border);

    border-radius:50%;

    background:var(--zp-white);

    color:var(--zp-blue);

    font-size:13px;

    cursor:pointer;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.popular-heart:hover{
    background:var(--zp-deep);

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

    color:var(--zp-gold-light);

    transform:translateY(-1px);
}


/* =====================================================
   VIEW ALL
===================================================== */

.popular-view-all{
    margin-top:35px;

    text-align:center;
}


.popular-all-btn{
    min-height:46px;

    padding:0 20px;

    display:inline-flex;

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

    gap:9px;

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

    border-radius:8px;

    background:var(--zp-white);

    color:var(--zp-deep);

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

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

    line-height:1;

    text-decoration:none;

    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.popular-all-btn i:first-child{
    color:var(--zp-gold);
}


.popular-all-btn:hover{
    background:var(--zp-deep);

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

    color:var(--zp-white);

    transform:translateY(-1px);
}


.popular-all-btn:hover i{
    color:var(--zp-gold-light);
}


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

.popular-empty{
    grid-column:1/-1;

    padding:45px;

    color:var(--zp-muted);

    font-size:14px;
    line-height:1.6;

    text-align:center;
}


/* =====================================================
   ACCESSIBILITY
===================================================== */

.popular-tour-body a:focus-visible,
.popular-heart:focus-visible,
.popular-all-btn:focus-visible{
    outline:
        3px solid
        rgba(245,160,0,.30);

    outline-offset:2px;
}


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

@media(max-width:1180px){

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

}


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

@media(max-width:900px){

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

}


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

@media(max-width:620px){

    .popular-tours-section{
        padding:60px 0 70px;
    }


    .popular-tours-section .container{
        width:calc(100% - 30px);
    }


    .popular-heading{
        margin-bottom:32px;
    }


    .popular-kicker{
        font-size:11px;

        letter-spacing:1.3px;
    }


    .popular-heading h2{
        font-size:32px;

        line-height:1.15;

        letter-spacing:-1px;
    }


    .popular-heading p{
        margin-top:11px;

        font-size:14px;

        line-height:1.65;
    }


    .popular-tours-grid{
        grid-template-columns:1fr;

        gap:20px;
    }


    .popular-tour-image{
        height:235px;
    }


    .popular-tour-body{
        padding:
            22px
            18px
            19px;
    }


    .popular-tour-body h3{
        min-height:auto;

        font-size:17px;
    }


    .popular-review > span,
    .tour-stars{
        font-size:11px;
    }


    .popular-tour-info >
    div:first-child span{
        font-size:11px;
    }


    .popular-price strong{
        font-size:18px;
    }


    .popular-price > span{
        font-size:11px;
    }


    .popular-all-btn{
        font-size:12px;
    }

}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media(max-width:380px){

    .popular-tours-section .container{
        width:calc(100% - 22px);
    }


    .popular-heading h2{
        font-size:29px;
    }


    .popular-heading p{
        font-size:13px;
    }


    .popular-tour-image{
        height:220px;
    }


    .popular-tour-body{
        padding-left:16px;
        padding-right:16px;
    }


    .popular-tour-info{
        padding-left:12px;
        padding-right:12px;
    }

}


/* =====================================================
   FINAL ZANZI STROLL BRAND SAFETY
===================================================== */

.popular-tours-section{
    accent-color:var(--zp-gold);
}


.popular-tours-section ::selection{
    color:var(--zp-white);

    background:var(--zp-blue);
}