/* =========================================================
   MASALA ZONE PRO
   GALLERY PAGE
========================================================= */

.mz-gallery-page{
    width:100%;
    overflow:hidden;
    background:#fff;
}

.mz-gallery-page-container{
    width:min(1180px, calc(100% - 40px));
    margin:0 auto;
}


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

.mz-gallery-page-hero{
    position:relative;
    padding:105px 0 100px;
    background:
        linear-gradient(
            rgba(35,20,12,.84),
            rgba(35,20,12,.84)
        ),
        url("../images/about.jpg") center/cover no-repeat;
    text-align:center;
}

.mz-gallery-page-hero::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-1px;
    width:100%;
    height:55px;
    transform:translateX(-50%);
    background:#fff;
    clip-path:ellipse(55% 50% at 50% 100%);
}

.mz-gallery-page-hero .mz-gallery-page-container{
    position:relative;
    z-index:2;
}

.mz-gallery-page-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 17px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:50px;
    color:#fff;
    font-size:10px;
    font-weight:700;
    letter-spacing:2px;
}

.mz-gallery-page-hero h1{
    max-width:850px;
    margin:22px auto 18px;
    color:#fff;
    font-family:"Playfair Display",serif;
    font-size:58px;
    line-height:1.12;
    font-weight:700;
}

.mz-gallery-page-hero h1 span{
    display:block;
    color:#d98252;
}

.mz-gallery-page-hero p{
    max-width:650px;
    margin:0 auto;
    color:rgba(255,255,255,.82);
    font-size:15px;
    line-height:1.9;
}


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

.mz-gallery-page-content{
    padding:100px 0;
}

.mz-gallery-page-heading{
    max-width:680px;
    margin:0 auto 55px;
    text-align:center;
}

.mz-gallery-page-label{
    display:inline-block;
    margin-bottom:14px;
    color:#c85b2d;
    font-size:10px;
    font-weight:800;
    letter-spacing:2px;
}

.mz-gallery-page-heading h2{
    margin:0 0 20px;
    color:#241914;
    font-family:"Playfair Display",serif;
    font-size:45px;
    line-height:1.15;
}

.mz-gallery-page-heading h2 span{
    color:#c85b2d;
}

.mz-gallery-page-heading p{
    margin:0;
    color:#756b64;
    font-size:14px;
    line-height:1.9;
}


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

.mz-gallery-page-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.mz-gallery-page-item{
    display:block;
    overflow:hidden;
    border:1px solid #eee3dc;
    border-radius:20px;
    background:#fff;
    text-decoration:none;
    box-shadow:0 10px 30px rgba(35,24,18,.04);
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.mz-gallery-page-item:hover{
    transform:translateY(-7px);
    box-shadow:0 22px 50px rgba(35,24,18,.10);
}


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

.mz-gallery-page-image{
    position:relative;
    height:290px;
    overflow:hidden;
    background:#eee;
}

.mz-gallery-page-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .5s ease;
}

.mz-gallery-page-item:hover
.mz-gallery-page-image img{
    transform:scale(1.07);
}


/* =========================================================
   OVERLAY
========================================================= */

.mz-gallery-page-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(35,20,12,.55);
    opacity:0;
    transition:opacity .3s ease;
}

.mz-gallery-page-item:hover
.mz-gallery-page-overlay{
    opacity:1;
}

.mz-gallery-page-view{
    display:flex;
    align-items:center;
    gap:9px;
    padding:11px 18px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:50px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(8px);
    color:#fff;
    font-size:11px;
    font-weight:700;
}

.mz-gallery-page-view i{
    font-size:12px;
}


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

.mz-gallery-page-info{
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:22px 21px 23px;
}

.mz-gallery-page-info h3{
    margin:0 0 8px;
    color:#2a1d16;
    font-family:"Playfair Display",serif;
    font-size:21px;
    line-height:1.2;
}

.mz-gallery-page-info p{
    max-width:290px;
    margin:0;
    color:#776d66;
    font-size:11px;
    line-height:1.7;
}

.mz-gallery-page-meta{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
}

.mz-gallery-page-rating{
    display:flex;
    align-items:center;
    gap:5px;
    color:#a85a28;
    font-size:10px;
    font-weight:700;
    white-space:nowrap;
}

.mz-gallery-page-rating i{
    font-size:9px;
}

.mz-gallery-page-meta strong{
    color:#c85b2d;
    font-family:"Playfair Display",serif;
    font-size:18px;
    white-space:nowrap;
}


/* =========================================================
   MENU CTA
========================================================= */

.mz-gallery-page-menu-cta{
    margin-top:80px;
    padding:65px 40px;
    border-radius:25px;
    background:
        linear-gradient(
            105deg,
            rgba(35,19,11,.96),
            rgba(35,19,11,.78)
        ),
        url("../images/about.jpg") center/cover no-repeat;
    text-align:center;
}

.mz-gallery-page-menu-cta > span{
    display:block;
    margin-bottom:13px;
    color:#e7ad8f;
    font-size:10px;
    font-weight:800;
    letter-spacing:2px;
}

.mz-gallery-page-menu-cta h2{
    margin:0 0 17px;
    color:#fff;
    font-family:"Playfair Display",serif;
    font-size:42px;
    line-height:1.15;
}

.mz-gallery-page-menu-cta h2 span{
    color:#d98252;
}

.mz-gallery-page-menu-cta p{
    max-width:560px;
    margin:0 auto 28px;
    color:rgba(255,255,255,.75);
    font-size:13px;
    line-height:1.8;
}

.mz-gallery-page-menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:50px;
    padding:0 23px;
    border-radius:10px;
    background:#c85b2d;
    color:#fff;
    text-decoration:none;
    font-size:11px;
    font-weight:800;
    transition:.25s ease;
}

.mz-gallery-page-menu-btn:hover{
    background:#ad4821;
    color:#fff;
    transform:translateY(-2px);
}


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

@media (max-width:1000px){

    .mz-gallery-page-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .mz-gallery-page-image{
        height:270px;
    }

}


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

@media (max-width:600px){

    .mz-gallery-page-container{
        width:min(100% - 30px,1180px);
    }


    /* HERO */

    .mz-gallery-page-hero{
        padding:75px 0 70px;
    }

    .mz-gallery-page-hero h1{
        font-size:36px;
        line-height:1.15;
    }

    .mz-gallery-page-hero p{
        font-size:12px;
        line-height:1.75;
    }


    /* CONTENT */

    .mz-gallery-page-content{
        padding:70px 0;
    }

    .mz-gallery-page-heading{
        margin-bottom:35px;
    }

    .mz-gallery-page-heading h2{
        font-size:34px;
    }

    .mz-gallery-page-heading p{
        font-size:12px;
        line-height:1.8;
    }


    /* GRID */

    .mz-gallery-page-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .mz-gallery-page-image{
        height:260px;
    }


    /* INFO */

    .mz-gallery-page-info{
        padding:20px 18px;
    }

    .mz-gallery-page-info h3{
        font-size:20px;
    }

    .mz-gallery-page-info p{
        font-size:11px;
    }


    /* CTA */

    .mz-gallery-page-menu-cta{
        margin-top:55px;
        padding:45px 20px;
        border-radius:20px;
    }

    .mz-gallery-page-menu-cta h2{
        font-size:34px;
    }

    .mz-gallery-page-menu-cta p{
        font-size:12px;
    }

    .mz-gallery-page-menu-btn{
        width:100%;
    }

}


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

@media (max-width:420px){

    .mz-gallery-page-hero h1{
        font-size:32px;
    }

    .mz-gallery-page-image{
        height:230px;
    }

    .mz-gallery-page-info{
        flex-direction:column;
        gap:15px;
    }

    .mz-gallery-page-meta{
        flex-direction:row;
        align-items:center;
    }

}
/* =========================================================
   GALLERY MODAL - SCROLL FIX
========================================================= */

.mz-modal{
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
}


.mz-modal-box{
    height:auto;
    max-height:calc(100vh - 40px);
    overflow:hidden;
}


.mz-modal-grid{
    height:min(760px, calc(100vh - 40px));
    min-height:0;
}


.mz-modal-image{
    height:100%;
    min-height:0;
}


.mz-modal-content{
    height:100%;
    min-height:0;
    max-height:none;
    overflow-y:auto;
    overflow-x:hidden;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:thin;
}


/* Chrome / Edge scrollbar */

.mz-modal-content::-webkit-scrollbar{
    width:6px;
}

.mz-modal-content::-webkit-scrollbar-track{
    background:transparent;
}

.mz-modal-content::-webkit-scrollbar-thumb{
    background:#D4AF37;
    border-radius:20px;
}


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

@media (max-width:900px){

    .mz-modal{
        align-items:flex-start;
        padding:20px;
    }

    .mz-modal-box{
        max-height:calc(100vh - 40px);
    }

    .mz-modal-grid{
        display:grid;
        grid-template-columns:1fr;

        height:auto;
        max-height:calc(100vh - 40px);
    }

    .mz-modal-image{
        height:300px;
        min-height:300px;
    }

    .mz-modal-content{
        height:auto;
        max-height:calc(100vh - 340px);

        overflow-y:auto;
    }

}


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

@media (max-width:600px){

    .mz-modal{
        padding:8px;
    }

    .mz-modal-box{
        width:100%;
        max-height:calc(100vh - 16px);

        margin:0;
    }

    .mz-modal-grid{
        max-height:calc(100vh - 16px);
    }

    .mz-modal-image{
        height:260px;
        min-height:260px;
    }

    .mz-modal-content{
        max-height:calc(100vh - 276px);

        padding:26px 20px 30px;
    }

}


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

@media (max-width:380px){

    .mz-modal-image{
        height:220px;
        min-height:220px;
    }

    .mz-modal-content{
        max-height:calc(100vh - 236px);
    }

}