/* ==========================================================
   GARAM MASALA RESTAURANT PLATFORM
   FILE       : responsive.css
   VERSION    : 1.0.0
   AUTHOR     : SMITECH
   PURPOSE    : Responsive Styles
========================================================== */


/* ==========================================================
   LARGE DEVICES
========================================================== */

@media (max-width:1200px){

}


/* ==========================================================
   TABLETS
========================================================== */
/* ==========================================================
   TABLETS
========================================================== */

@media (max-width:992px){

    .gm-hero{

        min-height:75vh;

    }

    .gm-hero h1{

        font-size:52px;

    }

    .gm-hero p{

        font-size:17px;

    }

    .gm-hero-buttons{

        justify-content:center;

        flex-wrap:wrap;

    }

    .gm-about{

        padding:90px 0;

    }

    .gm-about-content{

        padding-left:0;

        margin-top:40px;

        text-align:center;

    }

    .gm-about-exp{

        left:20px;

        bottom:20px;

    }

}

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

@media (max-width:768px){

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

    .gm-hero{

        min-height:90vh;

        text-align:center;

    }

    .gm-hero h1{

        font-size:40px;

        line-height:1.2;

    }

    .gm-hero p{

        font-size:16px;

        margin-left:auto;

        margin-right:auto;

    }

    .gm-hero-buttons{

        flex-direction:column;

        align-items:center;

        gap:15px;

    }

    .gm-btn{

        width:240px;

        justify-content:center;

    }

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

    .gm-about,
    .gm-why,
    .gm-signature,
    .gm-gallery,
    .gm-testimonials,
    .gm-reservation{

        padding:80px 0;

    }

    /* =========================
       ABOUT
    ========================= */

    .gm-about-image img{

        height:420px;

    }

    .gm-about-content{

        text-align:center;

    }

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

    .gm-footer{

        text-align:center;

    }

    .gm-footer-contact li{

        justify-content:center;

    }

    .gm-footer-social{

        justify-content:center;

    }

    .gm-footer-bottom{

        flex-direction:column;

        text-align:center;

    }

}

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

@media (max-width:576px){

    h1{

        font-size:34px;

    }

    h2{

        font-size:28px;

    }

}
/* ==========================================================
   01. GLOBAL RESPONSIVE SETTINGS
========================================================== */

*,
*::before,
*::after{

    box-sizing:border-box;

}

img{

    max-width:100%;

    height:auto;

    display:block;

}

.container{

    width:100%;

}
/* ==========================================================
   ABOUT PAGE
   JOURNEY TIMELINE
   ========================================================== */

@media(max-width:991px){

.gm-timeline::before{

    left:35px;

}

.gm-timeline-item{

    width:100%;

    margin-left:0 !important;

    padding-left:90px !important;

    padding-right:0 !important;

    text-align:left !important;

}

.gm-timeline-icon{

    left:0 !important;

    right:auto !important;

}

}
/* ==========================================================
   ABOUT PAGE - WHY GUESTS LOVE US
   ========================================================== */

@media (max-width:991px){

    .gm-philosophy-grid{

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

    }

}

@media (max-width:576px){

    .gm-philosophy-grid{

        grid-template-columns:1fr;

    }

}
.gm-card-divider{

    width:60px;

    height:3px;

    background:#D4AF37;

    margin:18px auto 22px;

    border-radius:50px;

}
.gm-philosophy-card:hover{

    transform:translateY(-10px);

    border-color:#D4AF37;

    box-shadow:0 20px 50px rgba(0,0,0,.12);

}
.gm-philosophy-card h3{

    margin-bottom:18px;

    color:#222;

    font-size:1.5rem;

}
.gm-philosophy-card p{

    color:#666;

    line-height:1.9;

    margin:0;

}
/* ==========================================================
   ABOUT PAGE
   05. INSIDE OUR KITCHEN
   ========================================================== */

@media (max-width:991px){

    .gm-kitchen{

        padding:90px 0;

    }

    .gm-kitchen-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

    .gm-kitchen-content{

        text-align:center;

    }

    .gm-kitchen-features{

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

    }

}

@media (max-width:576px){

    .gm-kitchen-features{

        grid-template-columns:1fr;

    }

}
/* ==========================================================
   ABOUT PAGE
   06. MEET OUR TEAM
   ========================================================== */

@media (max-width:991px){

    .gm-team{

        padding:90px 0;

    }

    .gm-team-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

    .gm-team-content{

        text-align:center;

    }

    .gm-team-points{

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

    }

}

@media (max-width:576px){

    .gm-team-points{

        grid-template-columns:1fr;

    }

}
/* ==========================================================
   ABOUT PAGE
   07. AWARDS & RECOGNITION
   ========================================================== */

@media (max-width:991px){

    .gm-awards{

        padding:90px 0;

    }

    .gm-awards-grid{

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

        gap:25px;

    }

}

@media (max-width:576px){

    .gm-awards-grid{

        grid-template-columns:1fr;

    }

}
/* ==========================================================
   ABOUT PAGE
   08. OUR PROMISE
   ========================================================== */

@media (max-width:991px){

    .gm-promise{

        padding:90px 0;

    }

    .gm-promise-box{

        padding:50px 35px;

    }

}

@media (max-width:576px){

    .gm-promise-box{

        padding:40px 25px;

        border-radius:20px;

    }

    .gm-promise-icon{

        width:70px;

        height:70px;

        font-size:26px;

    }

}

/* ==========================================================
   GALLERY PAGE
   RESPONSIVE
   ========================================================== */


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

@media (max-width:1200px){

    .gm-experience-layout,
    .gm-award-wrapper,
    .gm-celebration-layout{

        grid-template-columns:1fr;

        gap:40px;

    }

    .gm-gallery-masonry{

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

        grid-auto-rows:240px;

    }

    .gm-gallery-box:nth-child(1),
    .gm-gallery-box:nth-child(5){

        grid-column:auto;

        grid-row:auto;

    }

}


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

@media (max-width:992px){

    .gm-gallery-hero{

        min-height:460px;

    }

    .gm-gallery-experience,
    .gm-signature-gallery,
    .gm-gallery-awards,
    .gm-gallery-celebrations{

        padding:90px 0;

    }

    .gm-experience-side{

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

    }

    .gm-award-grid{

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

    }

    .gm-celebration-grid{

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

    }

}


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

@media (max-width:768px){

    .gm-gallery-hero{

        min-height:340px;

    }

    .gm-gallery-masonry,
    .gm-award-grid,
    .gm-celebration-grid,
    .gm-experience-side{

        grid-template-columns:1fr;

    }

    .gm-gallery-box:nth-child(1),
    .gm-gallery-box:nth-child(5){

        grid-column:auto;

        grid-row:auto;

    }

    .gm-gallery-box,
    .gm-award-box{

        height:280px;

    }

    .gm-gallery-box img,
    .gm-award-box img{

        height:100%;

    }

    .gm-experience-card img{

        height:240px;

    }

    .gm-celebration-card img{

        height:240px;

    }

    .gm-celebration-overlay{

        padding:25px;

    }

    .gm-celebration-overlay h3{

        font-size:1.8rem;

    }

}


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

@media (max-width:576px){

    .gm-gallery-experience,
    .gm-signature-gallery,
    .gm-gallery-awards,
    .gm-gallery-celebrations{

        padding:70px 0;

    }

    .gm-gallery-overlay-content,
    .gm-award-overlay,
    .gm-celebration-card-overlay,
    .gm-experience-content{

        padding:18px;

    }

    .gm-gallery-overlay-content h3{

        font-size:1.35rem;

    }

    .gm-award-overlay h3{

        font-size:1.30rem;

    }

    .gm-experience-content h3{

        font-size:1.40rem;

    }

    .gm-celebration-overlay h3{

        font-size:1.55rem;

    }

}
/* ==========================================================
   GALLERY PAGE
   RESPONSIVE
========================================================== */


/* ==========================================================
   LARGE LAPTOP
========================================================== */

@media (max-width:1400px){

    .gm-signature-grid,
    .gm-awards-grid,
    .gm-guests-grid,
    .gm-celebration-grid,
    .gm-gallery-grid{

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

    }

}



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

@media (max-width:992px){

    .gm-gallery-hero{

        min-height:460px;

    }

    .gm-gallery-intro{

        padding:80px 0 50px;

    }

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

        padding:90px 0;

    }

    .gm-experience-grid,
    .gm-ambience-wrapper{

        grid-template-columns:1fr;

        gap:40px;

    }

    .gm-signature-grid,
    .gm-awards-grid,
    .gm-guests-grid,
    .gm-celebration-grid,
    .gm-gallery-grid{

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

        gap:25px;

    }

}



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

@media (max-width:768px){

    .gm-gallery-hero{

        min-height:320px;

        background-position:center;

    }

    .gm-gallery-intro{

        padding:70px 0 40px;

    }

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

        padding:70px 0;

    }

    .gm-signature-grid,
    .gm-awards-grid,
    .gm-guests-grid,
    .gm-celebration-grid,
    .gm-gallery-grid{

        grid-template-columns:1fr;

    }

    .gm-exp-right{

        gap:20px;

    }

    .gm-exp-card img{

        height:240px;

    }

    .gm-signature-card img{

        height:300px;

    }

    .gm-ambience-card img{

        height:240px;

    }

    .gm-award-image{

        height:260px;

    }

    .gm-guest-image{

        height:280px;

    }

    .gm-celebration-card img{

        height:280px;

    }

    .gm-gallery-item img{

        height:260px;

    }

}



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

@media (max-width:576px){

    .gm-gallery-intro{

        padding:60px 0 30px;

    }

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

        padding:60px 0;

    }

    .gm-exp-overlay,
    .gm-signature-overlay,
    .gm-gallery-caption,
    .gm-celebration-overlay{

        padding:18px;

    }

    .gm-exp-overlay h3{

        font-size:1.45rem;

    }

    .gm-signature-overlay h3{

        font-size:1.45rem;

    }

    .gm-award-content h3{

        font-size:1.40rem;

    }

    .gm-guest-content h3{

        font-size:1.50rem;

    }

    .gm-gallery-caption h3{

        font-size:1.35rem;

    }

}