*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
scroll-behavior:smooth;
}

body{
background:#f5f5f5;
overflow-x:hidden;
}

/* loader */

#loader{

position:fixed;

width:100%;
height:100%;

background:white;

display:flex;

justify-content:center;
align-items:center;

z-index:99999;

}

.spinner{

width:60px;
height:60px;

border:6px solid #ddd;

border-top:6px solid #ff385c;

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{
transform:rotate(360deg);
}

}


/* HEADER */

header{
background:#0d1b2a;
color:white;
padding:18px 8%;
display:flex;
justify-content:space-between;
align-items:center;
position:sticky;
top:0;
z-index:1000;
box-shadow:0 2px 10px rgba(0,0,0,0.2);
}

header h2{
font-size:28px;
}

nav a{
color:white;
text-decoration:none;
margin-left:18px;
font-size:16px;
transition:0.3s;
}

nav a:hover{
color:#ff9800;
}



/* HERO SECTION */

.hero{
height:90vh;

background:
linear-gradient(rgba(0,0,0,0.6),
rgba(0,0,0,0.6)),

url("imagesall/unnamed.webp");

background-size:cover;
background-position:center;

display:flex;
justify-content:center;
align-items:center;
text-align:center;

padding:20px;
}

.hero-content{
background:rgba(0,0,0,0.5);
padding:45px;
border-radius:20px;
max-width:700px;
color:white;
animation:fadeIn 1.5s ease;
}

.hero h1{
font-size:55px;
margin-bottom:15px;
}

.hero-text{
font-size:22px;
margin-bottom:20px;
}

.price-tag{
font-size:36px;
color:#ff9800;
margin-bottom:25px;
}

.hero-btn{
background:#ff385c;
padding:14px 32px;
border-radius:10px;
color:white;
text-decoration:none;
font-size:18px;
transition:0.3s;
display:inline-block;
}

.hero-btn:hover{
background:#ff9800;
transform:scale(1.05);
}



/* GENERAL SECTION */

section{
padding:80px 8%;
text-align:center;
}

section h2{
font-size:38px;
margin-bottom:15px;
color:#0d1b2a;
}

.room-text{
color:#666;
font-size:18px;
margin-bottom:40px;
}



/* ROOM CARDS */

.room-slider{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));

gap:25px;
margin-top:30px;
}

.room-card{
background:white;
border-radius:18px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transition:0.4s;
}

.room-card:hover{
transform:translateY(-10px);
box-shadow:0 10px 25px rgba(0,0,0,0.2);
}


.room-card{
position:relative;
}

.badge{
position:absolute;
top:15px;
left:15px;
background:#28a745;
color:white;
padding:8px 14px;
border-radius:30px;
font-size:14px;
font-weight:bold;
z-index:10;
}

.room-card img{
width:100%;
height:220px;
object-fit:cover;
}

.room-card h3{
padding-top:10px;
font-size:24px;
}

.room-card p{
padding:5px;
font-size:10;
color:#555;
}

.rating{
margin-bottom:20px;
font-size:15px;
color:#ff9800;
font-weight:bold;
}



/* SERVICES */

.offers{
display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;
margin-top:40px;
}

.offer-box{
background:white;
padding:30px;
width:250px;
border-radius:15px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transition:0.3s;
}

.offer-box:hover{
transform:translateY(-10px);
}

.offer-box i{
font-size:42px;
color:#ff385c;
margin-bottom:15px;
}

.offer-box h3{
margin-bottom:10px;
font-size:24px;
}



/* WHY CHOOSE US */

.why-container{
display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:20px;
margin-top:40px;
}

.why-box{
background:white;
padding:25px;
border-radius:15px;
font-size:18px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transition:0.3s;
}

.why-box:hover{
transform:scale(1.05);
}



/* BOOKING FORM */

form{
max-width:500px;
margin:auto;
background:white;
padding:35px;
border-radius:20px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

form input,
form select,
form button{
width:100%;
padding:14px;
margin:12px 0;
border-radius:10px;
font-size:16px;
}

form input,
form select{
border:1px solid #ddd;
}

form button{
background:#0d1b2a;
color:white;
border:none;
cursor:pointer;
transition:0.3s;
font-size:18px;
}

form button:hover{
background:#ff385c;
}



/* REVIEWS */

.review-container{
display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;
margin-top:40px;
}

.review-box{
background:white;
padding:25px;
width:300px;
border-radius:15px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transition:0.3s;
}

.review-box:hover{
transform:translateY(-10px);
}

.review-box p{
margin:15px 0;
color:#555;
}



/* CONTACT */

#contact p{
margin:10px 0;
font-size:18px;
color:#444;
}

/* INSTAGRAM BUTTON */

.instagram{

padding:70px 20px;

text-align:center;

background:#fff;

}

.instagram p{

font-size:22px;

margin:20px 0;

color:#ff385c;

font-weight:bold;

}

.insta-btn{

display:inline-block;

padding:14px 30px;

background:#ff385c;

color:white;

text-decoration:none;

border-radius:10px;

transition:0.3s;

}

.insta-btn:hover{

background:#ff9800;

}

/* WHATSAPP BUTTON */

.whatsapp{
position:fixed;
bottom:20px;
right:20px;
background:#25D366;
width:60px;
height:60px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
color:white;
font-size:32px;
text-decoration:none;
z-index:999;
box-shadow:0 5px 15px rgba(0,0,0,0.3);
transition:0.3s;
}

.whatsapp:hover{
transform:scale(1.1);
}



/* FOOTER */

footer{
background:#0d1b2a;
color:white;
text-align:center;
padding:20px;
margin-top:30px;
}



/* ANIMATION */

@keyframes fadeIn{

from{
opacity:0;
transform:translateY(30px);
}

to{
opacity:1;
transform:translateY(0);
}

}



/* MOBILE RESPONSIVE */

@media(max-width:768px){

header{
flex-direction:column;
padding:20px;
}

nav{
margin-top:15px;
}

nav a{
display:inline-block;
margin:8px;
}

.hero{
height:auto;
padding:100px 20px;
}

.hero-content{
padding:30px;
}

.hero h1{
font-size:38px;
}

.hero-text{
font-size:18px;
}

.price-tag{
font-size:28px;
}

section h2{
font-size:30px;
}

.room-card img{
height:200px;
}

form{
padding:25px;
}

}
.gallery{

grid-template-columns:1fr;

}

.big-image img{

height:300px;

}

.small-images img{

height:180px;

}

/* LOGO  */

.logo{
display:flex;
align-items:center;
gap:12px;
}

.logo img{
width:55px;
height:55px;
object-fit:cover;
border-radius:50%;
}

.logo h2{
font-size:40px;
}

/*    NEXT PAGE EFFECT    */

.room-link{
text-decoration:none;
color:black;
}
.room-card{
cursor:pointer;
}
.room-card img{
transition:0.4s;
}

.room-card:hover img{
transform:scale(1.05);
}    

/*    ROOM1.html    */


.gallery{

display: grid;

grid-template-columns: 2fr 1fr;

gap: 15px;

margin-top: 40px;

}



/* BIG IMAGE */

.big-image img{

width: 100%;

height: 520px;

object-fit: cover;

border-radius: 20px;

}



/* SMALL IMAGES */

.small-images{

display: grid;

grid-template-columns: 1fr 1fr;

gap: 15px;

}



.small-images img{

width: 100%;

height: 250px;

object-fit: cover;

border-radius: 15px;

transition: 0.3s;

cursor: pointer;

}



/* HOVER */

.big-image img:hover,
.small-images img:hover{

transform: scale(1.02);

}



/* MORE IMAGES */

.more-images{

position: relative;

cursor: pointer;

}



.more-images img{

width: 100%;

height: 250px;

object-fit: cover;

border-radius: 15px;

}



.overlay{

position: absolute;

top: 0;
left: 0;

width: 100%;
height: 100%;

background: rgba(0,0,0,0.6);

color: white;

display: flex;

align-items: center;
justify-content: center;

font-size: 28px;

font-weight: bold;

border-radius: 15px;

}



/* FULL GALLERY POPUP */

#galleryPopup{

display: none;

position: fixed;

top: 0;
left: 0;

width: 100%;
height: 100%;

background: rgba(0,0,0,0.95);

z-index: 9999;

overflow-y: auto;

padding: 40px;

}



/* GALLERY GRID */

.gallery-content{

display: grid;

grid-template-columns: 1fr 1fr;

gap: 20px;

}



/* IMAGES + VIDEO */

.gallery-content img,
.gallery-content video{

width: 100%;


border-radius: 15px;

}



/* CLOSE BUTTON */

#galleryPopup span{

position: fixed;

top: 20px;
right: 30px;

font-size: 35px;

color: white;

cursor: pointer;

z-index: 10000;

}



/* MOBILE */

@media(max-width:768px){

.gallery{

grid-template-columns: 1fr;

}

.gallery-content{

grid-template-columns: 1fr;

}

.big-image img{

height: 300px;

}

.small-images img,
.more-images img{

height: 180px;

}

}


/*   ROOM1.html description    */

 .room-info{

width: 100%;

background: white;

padding: 25px 50px;

margin-top: 40px;

border-radius: 20px;

box-sizing: border-box;

}



.room-info h2{

font-size: 32px;

margin-bottom: 10px;

color: #0d1b2a;

}



.room-info p{

font-size: 18px;

color: #444;

line-height: 1.7;

max-width: 1000px;

}


 

/* MOBILE */

@media(max-width:768px){

.room-info{

padding: 20px;

}

.room-info h2{

font-size: 24px;

}

.room-info p{

font-size: 16px;

}

}

 


 /*   ROOM1.html AMENTIES    */

.amenities{
margin-top:50px;
}

.amenities-box{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:30px;
}

.amenity{
background:white;
padding:18px;
border-radius:12px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
font-size:18px;
transition:0.3s;
}

.amenity:hover{
transform:translateY(-5px);
}

.nearby{
margin-top:60px;
}

.nearby-box{
background:white;
padding:25px;
border-radius:15px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
margin-top:20px;
text-align:left;
}

.nearby-box p{
margin:12px 0;
font-size:18px;
color:#444;
}





/*    ROOM1.html THINGS TO KNOWn    */

.things{
margin-top:60px;
}

.thing-box{

background:white;

padding:25px;

border-radius:15px;

margin-top:25px;

box-shadow:0 5px 15px rgba(0,0,0,0.1);

text-align:left;

}

.thing-box h3{

margin-bottom:15px;

color:#0d1b2a;

}

.thing-box p{

margin:10px 0;

color:#555;

font-size:17px;

line-height:1.6;

}

 /* IMAGE POPUP */

#popup{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.9);

display:none;

justify-content:center;
align-items:center;

z-index:9999;

padding:20px;

}

#popup img{

max-width:90%;
max-height:90%;

border-radius:20px;

animation:zoom 0.3s ease;

}

#popup span{

position:absolute;

top:25px;
right:35px;

font-size:40px;

color:white;

cursor:pointer;

}



/* IMAGE HOVER EFFECT */

.gallery img{
cursor:pointer;
transition:0.3s;
}

.gallery img:hover{
transform:scale(1.02);
}


/* CHECK IN OUT */

.check-cards{

display:flex;

justify-content:center;

gap:30px;

margin-top:50px;

flex-wrap:wrap;

}


.check-card{

background:white;

padding:30px;

width:280px;

border-radius:20px;

box-shadow:0 5px 15px rgba(0,0,0,0.1);

}


.check-card h3{

font-size:28px;

margin-bottom:15px;

}


/* MOBILE */

@media(max-width:768px){

.amenities-box{

grid-template-columns:1fr;

}

.room-info{

padding:25px;

}

.room-info h2{

font-size:30px;

}

.room-info p{

font-size:17px;

}

}



/* ANIMATION */

@keyframes zoom{

from{
transform:scale(0.7);
opacity:0;
}

to{
transform:scale(1);
opacity:1;
}

}

/*    MAPING   */


.map-container{
margin-top:40px;
border-radius:20px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
}


.location-title{
margin-top:40px;
margin-bottom:20px;
font-size:28px;
}

.direction-btn{

display:inline-block;

margin-top:25px;

padding:14px 30px;

background:#ff385c;

color:white;

text-decoration:none;

border-radius:10px;

font-size:18px;

transition:0.3s;

}

.direction-btn:hover{

background:#ff9800;

}

.direction-center{
text-align:center;
}

/*    find us on map   */

.location-title{

font-size:34px;

color:#0d1b2a;

margin-top:50px;

margin-bottom:25px;

font-weight:bold;

text-align:center;

position:relative;

}



/* SMALL LINE BELOW TITLE */

.location-title::after{

content:"";

width:90px;

height:4px;

background:#ff385c;

display:block;

margin:12px auto 0;

border-radius:10px;

}


.profile{

display: flex;
align-items: center;
gap: 15px;

justify-content: center;

}

#avatar{

width: 60px;
height: 60px;

border-radius: 50%;

background: #0d1b2a;
color: white;

display: flex;
align-items: center;
justify-content: center;

font-size: 28px;
font-weight: bold;

}



.topbar{

display: flex;
align-items: center;
justify-content: center;

gap: 20px;

}

#avatar{

width: 55px;
height: 55px;

border-radius: 50%;

background: #0d1b2a;
color: white;

display: flex;
align-items: center;
justify-content: center;

font-size: 26px;
font-weight: bold;

}


/* ==========================
DASHBOARD
========================== */

.dashboard{

min-height: 100vh;

display: flex;
flex-direction: column;

justify-content: center;
align-items: center;

background:
linear-gradient(
rgba(0,0,0,0.5),
rgba(0,0,0,0.5)
),
url("images/bg.jpg");

background-size: cover;
background-position: center;

padding: 20px;

}


/* ==========================
TOP BAR
========================== */

.topbar{

display: flex;
align-items: center;
gap: 20px;

background: rgba(255,255,255,0.1);

padding: 15px 25px;

border-radius: 20px;

backdrop-filter: blur(10px);

margin-bottom: 40px;

box-shadow:
0 8px 20px rgba(0,0,0,0.3);

}


/* ==========================
WELCOME TEXT
========================== */

.topbar h2{

color: white;

font-size: 38px;

font-weight: bold;

margin: 0;

}


/* ==========================
AVATAR
========================== */

#avatar{

width: 65px;
height: 65px;

border-radius: 50%;

background: white;
color: #0d1b2a;

display: flex;
justify-content: center;
align-items: center;

font-size: 30px;
font-weight: bold;

box-shadow:
0 5px 15px rgba(0,0,0,0.3);

}


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

.btn{

width: 260px;

padding: 15px;

border: none;
border-radius: 12px;

background: white;
color: #0d1b2a;

font-size: 18px;
font-weight: bold;

text-decoration: none;

display: flex;
justify-content: center;
align-items: center;

transition: 0.3s;

box-shadow:
0 5px 15px rgba(0,0,0,0.3);

}


.btn:hover{

transform: translateY(-3px);

background: #0d1b2a;
color: white;

}


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

@media(max-width:768px){

.topbar{

flex-direction: column;

text-align: center;

}

.topbar h2{

font-size: 28px;

}

.btn{

width: 220px;

}

}

.login-note{

color: white;

background: rgba(255,255,255,0.15);

padding: 10px 20px;

border-radius: 10px;

margin-bottom: 20px;

}



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

#reviewText{

width:100%;
height:120px;

padding:15px;

border:1px solid #ddd;

border-radius:10px;

resize:none;

font-size:16px;

}

.review-box h4{

margin-top:15px;

color:#ff385c;

}

#reviews h3{

margin-top: 50px;
margin-bottom: 20px;

font-size: 28px;

color: #0d1b2a;

}

.review-stars{

font-size:22px;

color:#ff9800;

margin-bottom:10px;

}

#reviewForm select{

width:100%;

padding:14px;

margin:12px 0;

border-radius:10px;

border:1px solid #ddd;

font-size:16px;

}