/*====================================================
SKSTAYS RESPONSIVE CSS
====================================================*/


/*=====================================
Large Laptop
=====================================*/

@media(max-width:1400px){

.hero-title{

font-size:58px;

}

.section-title{

font-size:42px;

}

}



/*=====================================
Laptop
=====================================*/

@media(max-width:1200px){

.hero-title{

font-size:52px;

}

.hero-desc{

font-size:18px;

}

.section-title{

font-size:38px;

}

.hero-card{

margin-top:40px;

}

.room-content{

padding-left:15px;

}

.premium-cta{

padding:50px;

}

}




/*=====================================
Tablet Landscape
=====================================*/

@media(max-width:992px){

.top-bar{

display:none;

}

.custom-navbar{

background:#081726;

padding:15px 0;

}

.navbar-collapse{

background:#081726;

padding:20px;

border-radius:15px;

margin-top:15px;

}

.navbar-nav .nav-link{

margin-left:0;

padding:12px 0;

}

.hero{

text-align:center;

padding:120px 0 80px;

min-height:auto;

}

.hero-title{

font-size:44px;

}

.hero-desc{

margin:auto;

}

.hero-features{

justify-content:center;

}

.hero-card{

margin-top:50px;

transform:none;

}

.hero-card:hover{

transform:none;

}

.section-title{

font-size:34px;

text-align:center;

}

.section-sub{

text-align:center;

}

.room-content{

padding:40px 0 0;

}

.premium-cta{

text-align:center;

padding:50px 35px;

}

footer{

text-align:center;

}

footer ul{

margin-bottom:30px;

}

.whatsapp{

width:60px;

height:60px;

font-size:28px;

}

.scrollTop{

width:55px;

height:55px;

font-size:20px;

}

}



/*=====================================
Tablet Portrait
=====================================*/

@media(max-width:768px){

section{

padding:70px 0;

}

.hero-title{

font-size:38px;

line-height:1.2;

}

.hero-desc{

font-size:17px;

}

.hero-btn{

display:block;

width:100%;

margin-bottom:15px;

text-align:center;

}

.hero-outline{

margin-left:0 !important;

}

.hero-features{

display:block;

}

.hero-features span{

display:block;

margin-bottom:15px;

}

.section-title{

font-size:30px;

}

.small-card{

margin-bottom:25px;

}

.user-card{

margin-bottom:30px;

}

.amenity-card{

margin-bottom:25px;

}

.why-card{

margin-bottom:30px;

}

.room-card{

margin-bottom:30px;

}

.contact-box{

margin-bottom:30px;

}

.premium-cta{

padding:40px 25px;

}

.premium-cta h2{

font-size:32px;

}

.stats-section .counter{

font-size:44px;

}

.map-box iframe{

height:350px;

}

footer{

padding:70px 0 30px;

}

}



/*=====================================
Large Mobile
=====================================*/

@media(max-width:576px){

.hero{

padding-top:120px;

}

.hero-title{

font-size:32px;

}

.hero-desc{

font-size:16px;

}

.logo-text{

font-size:28px;

}

.section-title{

font-size:28px;

}

.section-tag{

font-size:12px;

padding:8px 18px;

}

.hero-card{

padding:10px;

}

.hero-card img{

border-radius:15px;

}

.small-card{

padding:25px;

}

.user-card{

padding:30px;

}

.amenity-card{

padding:30px;

}

.amenity-icon{

width:70px;

height:70px;

}

.amenity-icon i{

font-size:28px;

}

.why-card{

padding:30px;

}

.why-card i{

width:70px;

height:70px;

line-height:70px;

font-size:28px;

}

.room-content{

padding:25px;

}

.room-content h3{

font-size:24px;

}

.testimonial{

padding:30px;

}

.contact-box{

padding:30px;

}

.whatsapp{

right:15px;

bottom:20px;

width:58px;

height:58px;

}

.scrollTop{

left:15px;

bottom:20px;

width:50px;

height:50px;

}

footer h3{

font-size:28px;

}

footer h4{

font-size:20px;

}

}



/*=====================================
Small Mobile
=====================================*/

@media(max-width:420px){

.hero-title{

font-size:28px;

}

.hero-desc{

font-size:15px;

}

.hero-btn{

padding:15px;

font-size:15px;

}

.section-title{

font-size:24px;

}

.hero-features span{

font-size:15px;

}

.stats-section .counter{

font-size:38px;

}

.premium-cta{

padding:30px 20px;

}

.premium-cta h2{

font-size:26px;

}

.gallery-item img{

height:220px;

}

.room-card img{

height:220px;

}

.map-box iframe{

height:280px;

}

}



/*=====================================
Very Small Devices
=====================================*/

@media(max-width:360px){

.hero-title{

font-size:24px;

}

.logo-text{

font-size:24px;

}

.hero-desc{

font-size:14px;

}

.section-title{

font-size:22px;

}

.hero-btn{

font-size:14px;

padding:14px;

}

}



/*=====================================
Landscape Mobile
=====================================*/

@media(max-height:500px){

.hero{

min-height:auto;

padding:120px 0 80px;

}

.hero-title{

font-size:34px;

}

}