/* ===================================
   Responsive CSS
   Licence to Chill Homestay
===================================*/

/* Large Desktop */

@media (max-width:1400px){

.hero-content h1{
    font-size:54px;
}

.container{
    width:92%;
}

}


/* Laptop */

@media (max-width:1200px){

.hero-content h1{
    font-size:48px;
}

.section-title h2{
    font-size:36px;
}

.gallery-grid,
.review-grid,
.features,
.place-grid,
.contact-grid,
.amenity-grid{

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

}

}


/* Tablet */

@media (max-width:992px){

header .container{

height:75px;

}

.logo h2{

font-size:26px;

}

nav{

display:none;

}

.mobile-menu{

display:block;

}

.hero{

height:90vh;

}

.hero-content h1{

font-size:42px;

}

.hero-content p{

font-size:18px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.gallery-grid,
.review-grid,
.features,
.place-grid,
.contact-grid,
.amenity-grid{

grid-template-columns:1fr 1fr;

gap:20px;

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

}


/* Mobile */

@media (max-width:768px){

section{

padding:60px 0;

}

.container{

width:94%;

}

.hero{

height:85vh;

}

.hero-content h1{

font-size:34px;

line-height:1.2;

}

.hero-content p{

font-size:17px;

}

.section-title{

margin-bottom:40px;

}

.section-title h2{

font-size:30px;

}

.gallery-grid,
.review-grid,
.features,
.place-grid,
.contact-grid,
.footer-grid,
.amenity-grid{

grid-template-columns:1fr;

}

.card,
.feature-box,
.review-card,
.place-card,
.contact-card{

padding:30px 20px;

}

.btn{

padding:14px 28px;

font-size:15px;

}

.map iframe{

height:350px;

}

footer{

text-align:center;

}

.footer-grid{

gap:35px;

}

}


/* Small Mobile */

@media (max-width:576px){

.hero{

height:80vh;

}

.hero-content{

padding:20px;

}

.hero-content h1{

font-size:28px;

}

.hero-content p{

font-size:16px;

}

.logo h2{

font-size:22px;

}

.btn{

width:100%;

max-width:280px;

text-align:center;

}

.gallery-item img{

height:220px;

}

.card i,
.feature-box i,
.contact-card i{

font-size:36px;

}

.section-title h2{

font-size:26px;

}

.whatsapp-float{

width:55px;
height:55px;
font-size:26px;

right:15px;
bottom:15px;

}

#topBtn{

width:45px;
height:45px;

right:15px;
bottom:80px;

}

}


/* Extra Small */

@media (max-width:400px){

.hero-content h1{

font-size:24px;

}

.hero-content p{

font-size:15px;

}

.logo h2{

font-size:20px;

}

.section-title h2{

font-size:24px;

}

.card,
.feature-box,
.review-card,
.place-card,
.contact-card{

padding:25px 15px;

}

}


/* Landscape Phones */

@media (max-height:500px){

.hero{

height:auto;
padding:140px 0 80px;

}

}


/* Print */

@media print{

header,
footer,
.whatsapp-float,
#topBtn,
.mobile-menu{

display:none;

}

body{

background:#fff;

color:#000;

}

a{

text-decoration:none;

color:#000;

}

}