/*=========================================================
MASALAKRAFT
MOBILE.CSS
Common Responsive Styles
=========================================================*/


/*=========================================
GENERAL
=========================================*/

html{

    scroll-behavior:smooth;

}

img{

    max-width:100%;

    height:auto;

}

.container{

    width:100%;

    max-width:1200px;

    margin:auto;

}


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

@media(max-width:992px){
    
    

section{

    padding:70px 35px;

}

h1{

    font-size:42px;

}

h2{

    font-size:34px;

}

h3{

    font-size:28px;

}

p{

    font-size:15px;

    line-height:1.8;

}

.btn-solid{

    padding:12px 28px;

}

}


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

@media(max-width:768px){

section{

    padding:60px 20px;

}

h1{

    font-size:34px;

}

h2{

    font-size:28px;

}

h3{

    font-size:24px;

}

p{

    font-size:15px;

}

.text-center-mobile{

    text-align:center;

}

.hide-mobile{

    display:none !important;

}

.show-mobile{

    display:block !important;

}

.full-width-mobile{

    width:100%;

}

}


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

@media(max-width:480px){

section{

    padding:50px 15px;

}

h1{

    font-size:28px;

}

h2{

    font-size:24px;

}

h3{

    font-size:20px;

}

p{

    font-size:14px;

}

.btn-solid{

    width:100%;

}

}



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

@media(max-width:992px){

.hero{

    min-height:180px;
    padding:30px 20px;

}

.hero-content{

    width:100%;

    text-align:center;

}

.hero h1{

    font-size:42px;

}

.hero h2{

    font-size:34px;

}

.hero p{

    max-width:650px;

    margin:20px auto 30px;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}

}


@media(max-width:768px){

.hero{

    min-height:180px;
    padding:30px 20px;

}

.hero-content{

    margin-top:0;

}

.hero h1{

    font-size:32px;

    line-height:1.3;

}

.hero h2{

    font-size:28px;

    line-height:1.4;

}

.hero p{

    font-size:15px;

    line-height:1.8;

    max-width:100%;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.hero-buttons .btn-solid{

    width:240px;

}

}


@media(max-width:480px){

.hero{

    min-height:170px;
    padding:25px 15px;

}

.hero h1{

    font-size:26px;

}

.hero h2{

    font-size:22px;

}

.hero p{

    font-size:14px;

}

.hero-buttons .btn-solid{

    width:100%;

}

}


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

@media(max-width:992px){

.about-content{

    display:flex;

    flex-direction:column;

    gap:35px;

}

.about-image{

    width:100%;

    height:320px;

}

}


@media(max-width:768px){

.about-text{

    text-align:center;

}

.about-image{

    height:260px;

}

}


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

@media(max-width:768px){

.review-flex-wrapper{

    display:flex;

    flex-direction:column;

    text-align:center;

}

.review-text-panel{

    text-align:center;

}

.review-qr-panel{

    max-width:180px;

    margin:auto;

}

}


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

@media(max-width:768px){

.menu-grid,

.gallery-grid,

.footer-container{

    grid-template-columns:1fr;

}

}


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

@media(max-width:992px){

.gallery-header{

    text-align:center;

}

.gallery-title{

    font-size:36px;

}

.gallery-subtitle{

    justify-content:center;

}

.gallery-subtitle::after{

    display:none;

}

.gallery-grid{

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

    gap:20px;

}

}


@media(max-width:768px){

.gallery-grid{

    grid-template-columns:1fr;

}

.gallery-title{

    font-size:30px;

}

}


/*=========================================================
INNER PAGE HERO
=========================================================*/

@media(max-width:768px){

.page-hero{

    height:32vh;

    margin-top:80px;

    padding:20px;

}

.page-hero h1{

    font-size:32px;

}

.page-hero p{

    font-size:15px;

}

}


/*=========================================================
FORMS
=========================================================*/

@media(max-width:768px){

input,
textarea,
select{

    width:100%;

    font-size:15px;

}

form .btn-solid{

    width:100%;

}

}


/*=========================================================
TABLES
=========================================================*/

@media(max-width:768px){

table{

    display:block;

    overflow-x:auto;

    white-space:nowrap;

}

}


/*=========================================================
GOOGLE MAP
=========================================================*/

@media(max-width:768px){

.map-container iframe{

    height:300px;

}

}


/*=========================================================
SPACING UTILITIES
=========================================================*/

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}

.pt-1{padding-top:10px;}
.pt-2{padding-top:20px;}
.pt-3{padding-top:30px;}
.pt-4{padding-top:40px;}

.pb-1{padding-bottom:10px;}
.pb-2{padding-bottom:20px;}
.pb-3{padding-bottom:30px;}
.pb-4{padding-bottom:40px;}


/*=========================================================
DISPLAY UTILITIES
=========================================================*/

.hide-desktop{

    display:none;

}

.show-desktop{

    display:block;

}

@media(max-width:768px){

.hide-desktop{

    display:block;

}

.show-desktop{

    display:none;

}

}


/*=========================================================
ANIMATION OPTIMIZATION
=========================================================*/

@media(max-width:768px){

*{

    animation-duration:.25s !important;

    transition-duration:.25s !important;

}

html{

    scroll-behavior:smooth;

}

}


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

img{

    max-width:100%;

    height:auto;

    display:block;

}


/*=========================================================
BUTTONS
=========================================================*/

@media(max-width:768px){

.btn-solid,
.btn-secondary{

    width:100%;

    text-align:center;

}

}


/*=========================================================
END
=========================================================*/