/* =========================================
   RESET
========================================= */

*{

margin:0;
padding:0;
box-sizing:border-box;

font-family:
'League Spartan',
sans-serif;

}


body{

background:#f6f6f6;

color:#111;

overflow-x:hidden;

}





/* =========================================
   SEARCH
========================================= */

.rooms-top{

padding:

140px 5% 40px;

}



.search-box{

height:75px;

background:white;

border-radius:28px;

display:flex;

align-items:center;

gap:18px;

padding:0 30px;

box-shadow:
0 20px 45px rgba(0,0,0,.06);

}



.search-box i{

color:#670000;

font-size:20px;

}



.search-box input{

width:100%;

height:100%;

border:none;

outline:none;

font-size:17px;

background:none;

}








/* =========================================
   ROOMS GRID
========================================= */

.rooms-section{

padding:

0 5% 100px;

}



.rooms-grid{

display:grid;

grid-template-columns:

repeat(
auto-fit,
minmax(380px,1fr)
);

gap:35px;

}









/* =========================================
   ROOM CARD
========================================= */

.room-card{

background:#fff;

border-radius:35px;

overflow:hidden;

box-shadow:

0 25px 60px rgba(0,0,0,.08);

transition:.3s;

}



.room-card:hover{

transform:translateY(-5px);

}









/* =========================================
   IMAGE AREA
========================================= */


.room-image{

width:100%;

height:430px;

position:relative;

overflow:hidden;

background:#eee;

}



.roomSwiper,
.swiper-wrapper,
.swiper-slide{

width:100%;

height:100%;

}



.swiper-slide img{

width:100%;

height:100%;

object-fit:cover;

}









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


.swiper-button-next,
.swiper-button-prev{

width:48px !important;

height:48px !important;

border-radius:50%;

background:

rgba(0,0,0,.55);

color:white !important;

}



.swiper-button-next::after,
.swiper-button-prev::after{

font-size:18px !important;

font-weight:900;

}









/* =========================================
   STATUS
========================================= */


.room-status{

position:absolute;

top:20px;

left:20px;

height:40px;

padding:0 20px;

border-radius:50px;

display:flex;

align-items:center;

justify-content:center;

color:white;

font-size:12px;

font-weight:900;

z-index:20;

}



.available{

background:#16a34a;

}



.booked{

background:#dc2626;

}









/* =========================================
   DETAILS
========================================= */


.room-content{

padding:35px;

display:flex;

flex-direction:column;

gap:20px;

}



.room-title{

font-size:42px;

font-weight:900;

}



.room-type{

font-size:15px;

font-weight:800;

color:#777;

text-transform:uppercase;

letter-spacing:2px;

}








/* PRICE */

.room-side{

display:flex;

flex-direction:column;

align-items:flex-start;

}



.room-side h3{

font-size:42px;

font-weight:900;

color:#670000;

}



.room-side span{

font-size:15px;

font-weight:700;

color:#777;

margin-bottom:25px;

}








/* BUTTON */

.book-btn{

width:100%;

height:60px;

background:#670000;

border-radius:20px;

color:white;

display:flex;

align-items:center;

justify-content:center;

gap:12px;

font-size:16px;

font-weight:900;

text-decoration:none;

}



.disabled{

background:#999;

pointer-events:none;

}











/* =========================================
   BIG SCREENS / TV
========================================= */

@media(min-width:1700px){


.rooms-grid{

grid-template-columns:

repeat(3,1fr);

}



.room-image{

height:520px;

}



.room-title{

font-size:55px;

}


}









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

@media(max-width:1000px){


.rooms-grid{

grid-template-columns:

repeat(
auto-fit,
minmax(320px,1fr)
);

}



.room-image{

height:350px;

}


}











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


@media(max-width:600px){


.rooms-top{

padding:

120px 18px 30px;

}



.rooms-section{

padding:

0 18px 70px;

}



.rooms-grid{

grid-template-columns:1fr;

}



.room-card{

border-radius:28px;

}



.room-image{

height:300px;

}



.room-content{

padding:25px;

}



.room-title{

font-size:32px;

}



.room-side h3{

font-size:32px;

}



.swiper-button-next,
.swiper-button-prev{

width:38px !important;

height:38px !important;

}



}








/* SMALL PHONE */

@media(max-width:380px){


.room-image{

height:250px;

}



.room-title{

font-size:26px;

}



.room-side h3{

font-size:27px;

}


}