/* ==========================================================
   GARAM MASALA RESTAURANT
   GALLERY PAGE
   VERSION : 4.0
   AUTHOR : SMITECH
========================================================== */


/* ==========================================================
   01. HERO
========================================================== */

.gm-gallery-hero{

    position:relative;

    min-height:620px;

    background:url("../images/gallery/gallery-banner.jpg")
    center center/cover no-repeat;

}

.gm-gallery-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.18);

}


/* ==========================================================
   02. INTRODUCTION
========================================================== */

.gm-gallery-intro{

    padding:110px 0 70px;

    background:#fff;

}


/* ==========================================================
   03. EXPERIENCE
========================================================== */
/* ==========================================================
   03. EXPERIENCE
========================================================== */

.gm-gallery-experience{

    padding:60px 0 120px;
    background:#fff;

}

.gm-experience-grid{

    display:grid;
    grid-template-columns:2fr 1fr;
    gap:35px;
    align-items:stretch;

}

.gm-exp-left{

    position:relative;
    min-height:720px;
    overflow:hidden;
    border-radius:24px;
    box-shadow:0 25px 60px rgba(0,0,0,.10);

}

.gm-exp-left img{

    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:.45s;

}

.gm-exp-left:hover img{

    transform:scale(1.05);

}

.gm-exp-right{

    display:grid;
    grid-template-rows:repeat(3,1fr);
    gap:25px;

}

.gm-exp-card{

    position:relative;
    min-height:220px;
    overflow:hidden;
    border-radius:22px;
    box-shadow:0 18px 45px rgba(0,0,0,.08);

}

.gm-exp-card img{

    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:.45s;

}

.gm-exp-card:hover img{

    transform:scale(1.08);

}

.gm-exp-overlay{

    position:absolute;
    inset:auto 0 0 0;
    padding:24px;
    background:linear-gradient(transparent,rgba(0,0,0,.82));

}

.gm-exp-overlay h3{

    color:#fff;
    margin-bottom:8px;
    font-family:'Cormorant Garamond',serif;
    font-size:1.8rem;

}

.gm-exp-overlay p{

    color:#fff;
    margin:0;
    line-height:1.7;

}


/* ==========================================================
   04. SIGNATURE SHOWCASE
========================================================== */

.gm-signature-showcase{

    padding:120px 0;

    background:#faf8f3;

}

.gm-signature-grid{

    display:grid;

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

    gap:28px;

    margin-top:70px;

}

.gm-signature-card{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.gm-signature-card img{

    width:100%;

    height:360px;

    object-fit:cover;

    display:block;

    transition:.45s;

}

.gm-signature-card:hover img{

    transform:scale(1.08);

}

.gm-signature-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:24px;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.82)
    );

}

.gm-signature-overlay span{

    display:block;

    color:#D4AF37;

    font-size:.82rem;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:10px;

}

.gm-signature-overlay h3{

    color:#fff;

    margin:0;

    font-size:1.7rem;

    font-family:'Cormorant Garamond',serif;

}
.gm-signature-card{

    min-height:360px;

}
/* ==========================================================
   05. RESTAURANT AMBIENCE
========================================================== */

.gm-gallery-ambience{

    padding:120px 0;

    background:#ffffff;

}

.gm-ambience-wrapper{

    display:grid;

    grid-template-columns:.90fr 1.10fr;

    gap:55px;

    align-items:center;

}

.gm-ambience-gallery{

    display:grid;

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

    gap:25px;

}

.gm-ambience-card{

    overflow:hidden;

    border-radius:24px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.gm-ambience-card img{

    width:100%;

    height:280px;

    display:block;

    object-fit:cover;

    transition:.45s;

}

.gm-ambience-card:hover img{

    transform:scale(1.08);

}

.gm-ambience-card{

    min-height:280px;

}

/* ==========================================================
   06. OWNER AWARDS
========================================================== */

.gm-owner-awards{

    padding:120px 0;

    background:#faf8f3;

}

.gm-awards-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.gm-award-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 18px 55px rgba(0,0,0,.08);

    transition:.35s;

}

.gm-award-card:hover{

    transform:translateY(-8px);

}

.gm-award-image{

    height:300px;

    overflow:hidden;

}

.gm-award-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.45s;

}

.gm-award-card:hover img{

    transform:scale(1.06);

}

.gm-award-content{

    padding:25px;

    text-align:center;

}

.gm-award-content h3{

    margin:0;

    font-size:1.60rem;

    font-family:'Cormorant Garamond',serif;

}
.gm-award-card{

    display:flex;
    flex-direction:column;
    height:100%;

}


/* ==========================================================
   07. DISTINGUISHED GUESTS
========================================================== */

.gm-gallery-guests{

    padding:120px 0;

    background:#ffffff;

}

.gm-guests-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.gm-guest-card{

    overflow:hidden;

    border-radius:22px;

    background:#fff;

    box-shadow:0 18px 55px rgba(0,0,0,.08);

    transition:.35s;

}

.gm-guest-card:hover{

    transform:translateY(-8px);

}

.gm-guest-image{

    height:320px;

    overflow:hidden;

}

.gm-guest-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.45s;

}

.gm-guest-card:hover img{

    transform:scale(1.06);

}

.gm-guest-content{

    padding:25px;

    text-align:center;

}

.gm-guest-content span{

    color:#D4AF37;

    display:block;

    margin-bottom:10px;

    font-size:.82rem;

    text-transform:uppercase;

    letter-spacing:1px;

}

.gm-guest-content h3{

    margin:0;

    font-size:1.75rem;

    font-family:'Cormorant Garamond',serif;

}
.gm-guest-card{

    display:flex;
    flex-direction:column;
    height:100%;

}


/* ==========================================================
   08. CELEBRATIONS
========================================================== */

.gm-gallery-celebrations{

    padding:120px 0;

    background:#faf8f3;

}

.gm-celebration-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.gm-celebration-card{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    box-shadow:0 20px 55px rgba(0,0,0,.08);

}

.gm-celebration-card img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:.45s;

}

.gm-celebration-card:hover img{

    transform:scale(1.08);

}

.gm-celebration-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:24px;

    background:linear-gradient(

        transparent,

        rgba(0,0,0,.82)

    );

}

.gm-celebration-overlay h3{

    color:#fff;

    margin:0;

    font-size:1.55rem;

    font-family:'Cormorant Garamond',serif;

}
.gm-celebration-card{

    min-height:320px;

}


/* ==========================================================
   09. COMPLETE GALLERY
========================================================== */

.gm-gallery-showcase{

    padding:120px 0;

    background:#ffffff;

}

.gm-gallery-grid{

    display:grid;

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

    gap:28px;

    margin-top:70px;

}

.gm-gallery-item{

    overflow:hidden;

    position:relative;

    border-radius:22px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.gm-gallery-item img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.45s;

}

.gm-gallery-item:hover img{

    transform:scale(1.08);

}

.gm-gallery-caption{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:22px;

    background:linear-gradient(

        transparent,

        rgba(0,0,0,.82)

    );

}

.gm-gallery-caption h3{

    color:#fff;

    margin:0;

    font-size:1.45rem;

    font-family:'Cormorant Garamond',serif;

}

.gm-gallery-item{

    min-height:280px;

}

/* ==========================================================
   10. GLOBAL HOVER
========================================================== */

.gm-exp-card,
.gm-signature-card,
.gm-ambience-card,
.gm-award-card,
.gm-guest-card,
.gm-celebration-card,
.gm-gallery-item{

    transition:.35s ease;

}

.gm-exp-card:hover,
.gm-signature-card:hover,
.gm-ambience-card:hover,
.gm-award-card:hover,
.gm-guest-card:hover,
.gm-celebration-card:hover,
.gm-gallery-item:hover{

    transform:translateY(-8px);

}
/* ==========================================================
   GLOBAL IMAGE FIX
========================================================== */

.gm-gallery-experience img,
.gm-signature-showcase img,
.gm-gallery-ambience img,
.gm-owner-awards img,
.gm-gallery-guests img,
.gm-gallery-celebrations img,
.gm-gallery-showcase img{

    display:block;
    width:100%;
    height:100%;
    object-fit:cover;

}