/* =========================
   STAYGO LUXURY THEME
========================= */

:root{

--gold:#C8A96B;
--gold-light:#E8C98A;
--dark:#0f1115;
--dark2:#171a21;
--card:#1d212b;
--white:#ffffff;
--text:#d7d7d7;

--shadow:
0 20px 60px rgba(0,0,0,.35);

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;

background:
linear-gradient(
180deg,
#0f1115,
#151922
);

color:var(--white);

overflow-x:hidden;

}

/* =========================
   TYPOGRAPHY
========================= */

h1,h2,h3,h4{

font-family:
'Playfair Display',
serif;

font-weight:700;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

display:inline-block;

color:var(--gold);

letter-spacing:3px;

font-size:13px;

margin-bottom:15px;

text-transform:uppercase;

}

.section-title h2{

font-size:48px;

}

/* =========================
   LOADER
========================= */

#loader{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:#000;

display:flex;

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

z-index:9999;

transition:.5s;

}

.loader-logo{

font-size:48px;

font-weight:700;

color:var(--gold);

font-family:
'Playfair Display',
serif;

}

/* =========================
   NAVBAR
========================= */

.navbar{

position:fixed;

top:0;

width:100%;

display:flex;

justify-content:space-between;

align-items:center;

padding:25px 6%;

z-index:1000;

backdrop-filter:blur(18px);

background:
rgba(15,17,21,.45);

border-bottom:

1px solid rgba(255,255,255,.08);

}

.logo{

font-size:32px;

font-weight:800;

color:var(--gold);

font-family:
'Playfair Display',
serif;

}

.navbar ul{

display:flex;

gap:35px;

list-style:none;

}

.navbar a{

color:white;

text-decoration:none;

font-size:15px;

transition:.3s;

}

.navbar a:hover{

color:var(--gold);

}

.nav-btn{

background:var(--gold);

padding:12px 24px;

border-radius:40px;

color:#111 !important;

font-weight:600;

}

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

.hero{

height:100vh;

position:relative;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

background:

linear-gradient(
rgba(0,0,0,.55),
rgba(0,0,0,.55)
),

url("../images/hotel-front.jpg");

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

}

.hero-overlay{

position:absolute;

inset:0;

background:

radial-gradient(
circle at center,
transparent,
rgba(0,0,0,.65)
);

}

.hero-content{

position:relative;

z-index:2;

max-width:900px;

padding:20px;

}

.hero-badge{

display:inline-block;

padding:12px 24px;

border-radius:40px;

background:

rgba(255,255,255,.08);

backdrop-filter:blur(10px);

margin-bottom:25px;

}

.hero h1{

font-size:90px;

line-height:1.05;

margin-bottom:20px;

}

.hero p{

font-size:20px;

color:#ddd;

max-width:700px;

margin:auto;

}

.hero-buttons{

margin-top:40px;

display:flex;

gap:20px;

justify-content:center;

flex-wrap:wrap;

}

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

.btn-primary{

display:inline-block;

padding:15px 34px;

background:var(--gold);

color:#111;

border-radius:50px;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.btn-primary:hover{

transform:translateY(-4px);

}

.btn-secondary{

display:inline-block;

padding:15px 34px;

border-radius:50px;

border:1px solid rgba(255,255,255,.3);

color:white;

text-decoration:none;

}

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

.search-section{

margin-top:-60px;

position:relative;

z-index:5;

padding:0 6%;

}

.search-box{

background:

rgba(255,255,255,.08);

backdrop-filter:blur(15px);

border:

1px solid rgba(255,255,255,.08);

padding:25px;

border-radius:25px;

display:flex;

gap:15px;

max-width:1100px;

margin:auto;

}

.search-box input{

flex:1;

padding:18px;

border:none;

border-radius:15px;

outline:none;

font-size:16px;

}

.search-box button{

padding:18px 30px;

border:none;

background:var(--gold);

border-radius:15px;

font-weight:700;

cursor:pointer;

}

/* =========================
   DESTINATIONS
========================= */

.destinations{

padding:120px 6%;

}

.destination-grid{

display:grid;

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

gap:20px;

}

.city-card{

background:

rgba(255,255,255,.05);

padding:28px;

text-align:center;

border-radius:18px;

backdrop-filter:blur(10px);

transition:.3s;

cursor:pointer;

}

.city-card:hover{

transform:translateY(-8px);

border:

1px solid var(--gold);

}

/* =========================
   FEATURED HOTELS
========================= */

.featured-hotels{

padding:120px 6%;

}

.hotel-grid{

display:grid;

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

gap:35px;

}

.hotel-card{

background:var(--card);

border-radius:28px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.4s;

}

.hotel-card:hover{

transform:
translateY(-10px);

}

.hotel-image{

position:relative;

height:280px;

overflow:hidden;

}

.hotel-image img{

width:100%;
height:100%;

object-fit:cover;

transition:.6s;

}

.hotel-card:hover img{

transform:scale(1.08);

}

.featured-tag{

position:absolute;

top:20px;
left:20px;

background:var(--gold);

color:#111;

padding:8px 16px;

border-radius:30px;

font-size:13px;

font-weight:700;

}

.hotel-content{

padding:28px;

}

.hotel-content h3{

font-size:34px;

margin:12px 0;

}

.hotel-tags{

display:flex;

gap:10px;

flex-wrap:wrap;

margin:20px 0;

}

.hotel-tags span{

background:
rgba(255,255,255,.08);

padding:8px 12px;

border-radius:30px;

font-size:12px;

}

.price-row{

display:flex;

justify-content:space-between;

margin:25px 0;

}

.hotel-btn{

display:block;

text-align:center;

padding:15px;

background:var(--gold);

border-radius:15px;

text-decoration:none;

color:#111;

font-weight:700;

}

/* =========================
   HOTEL 0771 PAGE
========================= */

.hotel-navbar{

position:fixed;

top:0;
left:0;

width:100%;

padding:22px 6%;

display:flex;

justify-content:space-between;

align-items:center;

z-index:999;

background:
rgba(15,17,21,.65);

backdrop-filter:blur(15px);

border-bottom:
1px solid rgba(255,255,255,.08);

}

.hotel-logo{

font-size:30px;

font-weight:700;

font-family:
'Playfair Display',
serif;

color:var(--gold);

}

.hotel-navbar ul{

display:flex;

gap:30px;

list-style:none;

}

.hotel-navbar a{

color:white;

text-decoration:none;

transition:.3s;

}

.hotel-navbar a:hover{

color:var(--gold);

}

/* =========================
   HOTEL HERO
========================= */

.hotel-hero{

height:100vh;

position:relative;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

}

.hero-image{

position:absolute;

width:100%;
height:100%;

object-fit:cover;

}

.hotel-hero::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
to bottom,
rgba(0,0,0,.55),
rgba(0,0,0,.75)
);

z-index:1;

}

.hotel-hero-content{

position:relative;

z-index:2;

text-align:center;

max-width:900px;

padding:20px;

}

.rating{

display:inline-block;

background:
rgba(255,255,255,.08);

padding:12px 24px;

border-radius:40px;

margin-bottom:25px;

backdrop-filter:blur(12px);

}

.hotel-hero-content h1{

font-size:95px;

margin-bottom:10px;

}

.hotel-hero-content h2{

font-size:28px;

font-weight:500;

color:var(--gold);

margin-bottom:20px;

}

.hotel-hero-content p{

font-size:20px;

line-height:1.8;

color:#ddd;

}

.hero-actions{

margin-top:40px;

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

/* =========================
   QUICK INFO
========================= */

.quick-info{

padding:90px 6%;

display:grid;

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

gap:25px;

}

.info-card{

background:
rgba(255,255,255,.05);

padding:40px;

border-radius:22px;

text-align:center;

font-size:24px;

backdrop-filter:blur(15px);

transition:.4s;

}

.info-card:hover{

transform:
translateY(-8px);

border:
1px solid var(--gold);

}

/* =========================
   ABOUT HOTEL
========================= */

.about-hotel{

padding:120px 6%;

text-align:center;

max-width:1100px;

margin:auto;

}

.about-hotel p{

font-size:18px;

line-height:2;

color:#d2d2d2;

margin-top:25px;

}

/* =========================
   ROOM SECTION
========================= */

.room-section{

padding:120px 6%;

}

.room-grid{

display:grid;

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

gap:40px;

}

.room-card{

background:var(--card);

border-radius:25px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.4s;

}

.room-card:hover{

transform:
translateY(-10px);

}

.room-card img{

width:100%;
height:280px;

object-fit:cover;

}

.room-content{

padding:25px;

}

.room-content h3{

font-size:34px;

margin-bottom:15px;

}

.room-content p{

color:#cfcfcf;

line-height:1.8;

}

.room-content h4{

margin-top:20px;

font-size:28px;

color:var(--gold);

}

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

.gallery-section{

padding:120px 6%;

}

.gallery-grid{

display:grid;

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

gap:18px;

}

.gallery-grid img{

width:100%;

height:260px;

object-fit:cover;

border-radius:20px;

cursor:pointer;

transition:.5s;

}

.gallery-grid img:hover{

transform:scale(1.04);

}

/* =========================
   AMENITIES
========================= */

.amenities-section{

padding:120px 6%;

}

.amenities-grid{

display:grid;

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

gap:25px;

}

.amenity-card{

background:
rgba(255,255,255,.05);

padding:35px;

border-radius:22px;

text-align:center;

backdrop-filter:blur(15px);

}

.amenity-card span{

font-size:42px;

display:block;

margin-bottom:15px;

}

.amenity-card h3{

margin-bottom:10px;

}

/* =========================
   REVIEWS
========================= */

.review-section{

padding:120px 6%;

}

.review-grid{

display:grid;

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

gap:25px;

}

.review-card{

background:var(--card);

padding:35px;

border-radius:22px;

}

.stars{

font-size:22px;

margin-bottom:20px;

}

.review-card p{

line-height:1.8;

margin-bottom:20px;

}

/* =========================
   LOCATION
========================= */

.location-section{

padding:120px 6%;

}

.location-container{

display:grid;

grid-template-columns:
1fr 1fr;

gap:40px;

align-items:center;

}

.location-info{

background:
rgba(255,255,255,.05);

padding:40px;

border-radius:22px;

}

.location-info p{

margin:15px 0;

line-height:1.8;

}

.map-box{

overflow:hidden;

border-radius:22px;

}

/* =========================
   FAQ
========================= */

.faq-section{

padding:120px 6%;

max-width:1000px;

margin:auto;

}

.faq-item{

background:
rgba(255,255,255,.05);

padding:28px;

border-radius:18px;

margin-bottom:20px;

}

.faq-item h3{

margin-bottom:12px;

}

/* =========================
   BOOKING CTA
========================= */

.booking-cta{

padding:120px 6%;

text-align:center;

}

.booking-cta h2{

font-size:60px;

margin-bottom:20px;

}

.booking-cta p{

font-size:18px;

margin-bottom:35px;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

/* =========================
   WHATSAPP FLOAT
========================= */

.whatsapp-float{

position:fixed;

right:25px;

bottom:25px;

width:65px;
height:65px;

border-radius:50%;

background:#25D366;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

text-decoration:none;

z-index:9999;

box-shadow:
0 10px 30px rgba(0,0,0,.35);

}

/* =========================
   FOOTER
========================= */

.hotel-footer{

padding:80px 6%;

text-align:center;

background:#0b0d11;

margin-top:100px;

}

.hotel-footer h2{

color:var(--gold);

margin-bottom:20px;

}

.hotel-footer p{

margin:10px 0;

color:#bfbfbf;

}

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

@media(max-width:992px){

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

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

.location-container{
grid-template-columns:1fr;
}

}

@media(max-width:768px){

.navbar ul,
.hotel-navbar ul{
display:none;
}

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

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

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

.search-box{
flex-direction:column;
}

.room-grid,
.hotel-grid,
.review-grid,
.amenities-grid{
grid-template-columns:1fr;
}

.booking-cta h2{
font-size:38px;
}

}

@media(max-width:480px){

.hero p,
.hotel-hero-content p{
font-size:16px;
}

.btn-primary,
.btn-secondary{
width:100%;
text-align:center;
}

}

#lightbox{
position:fixed;
inset:0;
background:rgba(0,0,0,.95);
display:none;
align-items:center;
justify-content:center;
z-index:99999;
}

#lightbox img{
max-width:90%;
max-height:90%;
border-radius:15px;
}

#closeLightbox{
position:absolute;
top:20px;
right:35px;
font-size:50px;
color:white;
cursor:pointer;
}

#loader{
display:none !important;
}