/* =========================
   GOOGLE FONT
========================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap');

/* =========================
   ROOT
========================= */

:root{

--gold:#C9A227;
--gold-light:#E7D7A5;

--bg:#F8F5F0;
--bg-soft:#FDFBF7;

--card:#FFFFFF;

--text:#1F1F1F;
--text-soft:#666666;

--border:#EAE4DA;

--radius:24px;

--shadow:
0 15px 40px rgba(0,0,0,.08);

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

*{

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

}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--bg);

color:var(--text);

overflow-x:hidden;

}
/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:var(--gold);

border-radius:50px;

}

/* =========================
   SELECTION
========================= */

::selection{

background:var(--gold);

color:#000;

}

/* =========================
   CONTAINER
========================= */

.container{

width:min(1400px,90%);
margin:auto;

}

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

section{

padding:120px 0;

position:relative;

}

/* =========================
   HEADINGS
========================= */

h1,h2,h3,h4{

font-family:
'Playfair Display',
serif;

font-weight:700;

}

p{

line-height:1.9;

color:var(--text-soft);

}

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

.navbar{

position:fixed;

top:0;
left:0;

width:100%;

padding:20px 8%;

display:flex;

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

z-index:999;

background:
rgba(248,245,240,.95);

backdrop-filter:
blur(20px);

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

}
.logo{

    font-family:'Great Vibes', cursive;

    font-size:28px;

    color:#D4AF37;

    margin:0;

    line-height:1;

    white-space:nowrap;

}

.navbar ul{

display:flex;

gap:35px;

list-style:none;

}

.navbar a{

text-decoration:none;

color:var(--text);

font-weight:500;

position:relative;

}

.navbar a::after{

content:"";

position:absolute;

left:0;
bottom:-5px;

width:0;
height:2px;

background:var(--gold);

transition:.3s;

}

.navbar a:hover::after{

width:100%;

}

/* =========================
   BUTTON
========================= */

.btn-gold{

display:inline-flex;

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

padding:16px 35px;

background:var(--gold);

color:black;

text-decoration:none;

border-radius:50px;

font-weight:700;

box-shadow:
0 15px 40px
rgba(212,175,55,.25);

}

.btn-gold:hover{

transform:
translateY(-4px);

}

.btn-outline{

padding:16px 35px;

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

border-radius:50px;

color:var(--gold);

text-decoration:none;

}

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

.card{

background:#fff;

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

border-radius:24px;

box-shadow:
var(--shadow);

}
border:

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

backdrop-filter:
blur(20px);

border-radius:24px;

box-shadow:
var(--shadow);

}

/* =========================
   TITLE
========================= */

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

color:var(--gold);

letter-spacing:4px;

font-size:13px;

}

.section-title h2{

font-size:3rem;

margin-top:15px;

}

.section-title::after{

content:"";

display:block;

width:80px;

height:3px;

background:var(--gold);

margin:20px auto;

}

/* =========================
   GLASS EFFECT
========================= */

.glass{

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

backdrop-filter:
blur(15px);

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

}

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

img{

max-width:100%;

display:block;

}

/* =========================
   HOVER EFFECT
========================= */

.hover-lift{

transition:.4s;

}

.hover-lift:hover{

transform:
translateY(-10px);

}

/* =========================
   GOLD LINE
========================= */

.gold-line{

width:120px;
height:3px;

background:var(--gold);

margin:25px auto;

}

/* =========================
   BADGE
========================= */

.badge{

display:inline-block;

padding:8px 18px;

background:
rgba(212,175,55,.12);

border:
1px solid rgba(212,175,55,.3);

color:var(--gold);

border-radius:50px;

font-size:13px;

}

/* =========================
   PAGE BANNER
========================= */

.page-banner{

height:50vh;

display:flex;

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

flex-direction:column;

text-align:center;

}

.page-banner h1{

font-size:4rem;

margin-bottom:15px;

}

.page-banner p{

letter-spacing:2px;

color:var(--gold);

}

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

footer{

background:#EFE8DD;

padding:80px 8%;

text-align:center;

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

}
.footer-logo{

font-size:32px;

font-weight:800;

color:var(--gold);

margin-bottom:20px;

}

.footer-links{

display:flex;

justify-content:center;

gap:25px;

margin-bottom:20px;

}

.footer-links a{

color:var(--text-soft);

text-decoration:none;

}

/* =========================
   FLOATING WA
========================= */

.floating-wa{

position:fixed;

right:25px;
bottom:25px;

width:60px;
height:60px;

background:#25D366;

border-radius:50%;

display:flex;

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

z-index:999;

font-size:26px;

box-shadow:
0 10px 30px
rgba(37,211,102,.3);

}

/* =========================
   TOP BUTTON
========================= */

#topBtn{

    position:fixed;

    right:25px;

    bottom:110px;

    width:55px;
    height:55px;

    border:none;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #D4AF37,
    #F5E6A8
    );

    color:#111;

    font-size:22px;

    cursor:pointer;

    display:none;

    z-index:999;

    box-shadow:
    0 10px 30px
    rgba(212,175,55,.4);

    transition:.3s;

}

#topBtn:hover{

    transform:
    translateY(-5px);

}
/* =========================
   BACKGROUND ORBS
========================= */

.loader{

background:#F8F5F0;

}

.loader-content h1{

color:#C9A227;

}

.loading-progress{

background:#C9A227;

}

body::after{

content:"";

position:fixed;

right:-300px;
bottom:-300px;

width:600px;
height:600px;

background:
radial-gradient(
circle,
rgba(212,175,55,.05),
transparent
);

pointer-events:none;

}

.loader{
    position:fixed;
    inset:0;
    background:#050505;
    z-index:99999;

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

.loader-content{
    text-align:center;
}

.loader-content h1{
    font-size:4rem;
    color:#D4AF37;
    letter-spacing:12px;
    margin-top:20px;
}

.loader-content span{
    color:#888;
    letter-spacing:6px;
}

.loading-bar{
    width:250px;
    height:4px;
    background:#222;
    margin-top:30px;
    border-radius:999px;
    overflow:hidden;
}

.loading-progress{
    width:0;
    height:100%;
    background:#D4AF37;
    animation:loading 2.5s linear forwards;
}

@keyframes loading{
    to{
        width:100%;
    }
} 

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

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:
    max-height .4s ease;

}

.faq-item.active .faq-answer{

    max-height:300px;

}

.faq-question{

width:100%;

background:#fff;

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

color:var(--text);

text-align:left;

padding:20px;

cursor:pointer;

font-size:16px;

border-radius:15px;

}

.faq-question:hover{

    color:#D4AF37;

} 

.navbar.scrolled{

    background:
    rgba(0,0,0,.95);

    backdrop-filter:
    blur(15px);

}

.reveal{

    opacity:1;

    transform:none;

}
.reveal.active{

    opacity:1;

    transform:
    translateY(0);

}

.nav-links a.active{

    color:#D4AF37;

}

.reveal,
.reveal.active{

    opacity:1 !important;

    transform:none !important;

}

.special-card{

    opacity:1 !important;

}

.special-card h3,
.special-card p,
.special-treatment h2{

    color:#fff !important;

}

.gallery-preview{

    margin:40px 0;

    padding:30px;

    background:
    linear-gradient(
    135deg,
    rgba(212,175,55,.08),
    rgba(255,255,255,.03)
    );

    border:1px solid
    rgba(212,175,55,.2);

    border-radius:30px;

    box-shadow:
    0 0 30px
    rgba(212,175,55,.08);

}

.logo-subtitle{

    font-size:9px;

    color:rgba(255,255,255,.6);

    letter-spacing:1px;

    margin-top:2px;

}

nav a,
.nav-links a{

    color:#fff;

    text-decoration:none;

    font-size:16px;

    font-weight:500;

    transition:.3s;

}

nav a:hover,
.nav-links a:hover{

    color:#D4AF37;

}

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 40px;

    background:#000;

}

.nav-links{

    display:flex;

    gap:25px;

    list-style:none;

}

.nav-links a{

    color:#fff;

    text-decoration:none;

    font-weight:500;

}

.nav-links a:hover{

    color:#D4AF37;

}

.btn-book{

    background:#D4AF37;

    color:#111;

    padding:12px 24px;

    border-radius:30px;

    text-decoration:none;

    font-weight:700;

}