@font-face {
    font-family: "Gorni";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        url(../fonts/Gorni-Regular.woff2) format("woff2"),
        url(../fonts/Gorni-Regular.woff) format("woff");
}

body {
    color: #eaeaea;
    font-family: "Inter", sans-serif;
    background-color: #16171b;
    background-image: url("../img/noise.webp");
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

#preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0f1011;
    overflow: hidden;
    transition: opacity 0.6s ease 0.1s, visibility 0.6s ease 0.1s;
}

#preloader::before {
  content: '';
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.09'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  pointer-events: none;
  z-index: 0;
}

#preloader.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Optional vignette so edges feel more dramatic */
/*#preloader::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.65) 100%);
    pointer-events: none;
}*/

#preloader-logo {
    width: min(72vw, 520px);   /* big on screen */
    opacity: 0;
    transform: scale(1);
    will-change: transform, opacity;

    /* Phase 1 – fade in */
    animation: logoReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

@keyframes logoReveal {
    from { opacity: 0; transform: scale(1.08); }
    to   { opacity: 1; transform: scale(1);    }
}

/* Phase 2 – zoom out toward header position.
    Triggered by adding .zoom-out class via JS */
#preloader-logo.zoom-out {
    animation: logoZoomOut 0.9s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

@keyframes logoZoomOut {
    from {
    opacity: 1;
    transform: scale(1) translateY(0);
    }
    to {
    opacity: 0.15;
    /*
        Shrink to roughly the navbar logo size.
        Adjust the scale value if your .site-logo has a different width.
        Typical navbar logo is ~120px wide vs the 520px preloader logo → ratio ≈ 0.23
    */
    transform: scale(0.3) translateY(-140vh);
    }
}

h1,
h2,
h3 {
    font-family: "Gorni", serif;
    text-transform: uppercase;
}
nav{
    z-index: 20;
}
a{
    color: #ffffff;
    text-decoration: none;
}
a:hover{
    color: #ececec;
}
.site-logo{
    width:260px; 
    height:auto;  
    display: block;
    margin: 0 auto;
}
.navbar-nav .nav-item{
    text-transform: uppercase;
    font-weight: 300;
    margin-left:25px;
}
.custom-navbar.scrolled{
    background:#18181b; 
    box-shadow:0 5px 20px rgba(0,0,0,0.3);
}
.section-padding {
    padding: 120px 0;
}
.section-padding-medium {
    padding: 80px 0;
}
.section-title {
    font-size: 32px;
    margin-top: 10px;
    color: #d89f1d;
}
.section-subtitle {
    color: #a7a9ac;
    letter-spacing: 2px;
    font-size: 16px;
    text-transform: capitalize;
}
.section-text {
    margin-top: 20px;
    line-height: 1.4;
}
.hero {
    height: 110vh;
    background: url("../img/hero-img.png");
    background-position: center top;
    background-size: cover;
    position: relative;
    /*margin-top: -200px;*/
}
.hero-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    /*background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9));*/
}

.display-2{
    color: #d89f1d;
}
.hero-content {
    position: relative;
    top: 30%;
    transform: translateY(-50%);
    width: 900px;
    padding-top: 20px;
}

.subheading {
    font-family: "Inter", sans-serif;
    text-transform: capitalize;
}

.btn-gold:hover{
background:#cc971b;
}

.btn-gold {
    border-radius: 0px;
    background: #d89f1d;
    border: 2px solid #d89f1d;
    padding:10px 22px;
    color: white;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
    width: 90%;
    max-width: 360px;
}

.btn-secondary {
    border-radius: 0px;
    background: transparent;
    border: 2px solid #d89f1d;
    padding:10px 22px;
    color: #d89f1d;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
    width: 90%;
    max-width: 360px;
}

.btn-gold:hover{
    background:#cc971b;
}

.btn-secondary:hover{
    border: 2px solid #cc971b;
    background: transparent;
    color: #cc971b;
}

.room-card {
    position:relative;
    height:420px;     
    overflow:hidden;
}
.room-card img {
    width:100%;
    height:100%;
    object-fit:cover;  
    display:block;
    transition: 0.6s;
}
.room-card:hover img {
    transform: scale(1.1);
}

.room-card h5{
    line-height: 1.3;
}
.room-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
}

.estate-section{
background:#18181b;
}

.estate-img{
width:100%;
height:420px;
object-fit:cover;
}

.estate-content{
background:#463C32;
padding:60px;
display:flex;
flex-direction:column;
justify-content:center;
}

.estate-subtitle{
font-size:16px;
color:#d89f1d;
text-transform:capitalize;
display:block;
margin-bottom:5px;
color: #a7a9ac;
}

.estate-title{
font-family:'Gorni', serif;
font-size:28px;
margin-bottom:20px;
color: #d89f1d;
}

.estate-content p{
color:#9ea3ab;
line-height:1.7;
margin-bottom:25px;
max-width:420px;
}

.promo-video{
position:relative;
height:640px;
background:url("../img/hero-img.webp") center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
}

.video-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.65);
}

.video-content{
position:relative;
z-index:2;
}

.video-subtitle{
font-size:12px;
letter-spacing:3px;
color:#d89f1d;
display:block;
margin-bottom:10px;
}

.video-title{
font-family:'Gorni', serif;
font-size:40px;
color:white;
margin-bottom:30px;
}

.video-play{
width:70px;
height:70px;
border-radius:50%;
border:2px solid rgba(255,255,255,.6);
display:flex;
align-items:center;
justify-content:center;
margin:auto;
font-size:28px;
color:white;
cursor:pointer;
transition:.3s;
}

.video-play:hover{
background:#d89f1d;
border-color:#d89f1d;
}

.facilities-bg-image{
    background: url("../img/services-bg.webp") center/cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.expansion-section{
    background: url("../img/expansion-bg.webp") center/cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}


.facility-subtitle{
font-size:16px;
letter-spacing:2px;
color:#a7a9ac;
display:block;
margin-bottom:10px;
}

.facility-title{
font-family:'Gorni', serif;
font-size:36px;
margin-bottom:50px;
color: #d89f1d;
}

.facility-item{
padding:30px;
border:1px solid rgba(255,255,255,.05);
background:#463C32;
transition:.3s;
height:100%;
}

.facility-item i{
font-size:28px;
color:#d89f1d;
margin-bottom:15px;
display:block;
}

.facility-item h5{
font-family:'Inter', sans-serif;
margin-bottom:10px;
text-transform: capitalize;
font-weight: 400;
line-height: 1.4;
color:#fbfdff;

}

.facility-item p{
color:#a7a9ac;
font-size:16px;
}

.facility-item:hover{
border-color:#d89f1d;
transform:translateY(-5px);
}

.gallery-img {
    border-radius: 6px;
    transition: 0.4s;
}
.gallery-img:hover {
    transform: scale(1.05);
}

/* LUXURY EXPERIENCE IMAGE LAYOUT */

.luxury-images {
    position: relative;
    height: 520px;
}

.luxury-images img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.luxury-img-1 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48%;
    height: 380px;
}

.luxury-img-2 {
    position: absolute;
    right: 0;
    top: 0;
    width: 48%;
    height: 380px;
}

.luxury-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 440px;
}

.luxury-img-01 {
    position: absolute;
    left: 0;
    top: 0;
    width: 48%;
    height: 380px;
}

.luxury-img-02 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 48%;
    height: 380px;
}

.reservation i {
    font-size:32px;
    color:#d89f1d;
}

.reservation h5, .reservation span {
    color: #d89f1d;
}

@media (max-width: 991px) {
    .site-logo{
        width:60px; 
        padding-bottom: 60px;
    }

    .hero {
        padding-bottom: 160px;
    }

    .section-padding-medium {
        padding: 60px 0;
    }

    .section-title, .room-overlay h5 {
        text-align: center;
    }

    .luxury-images {
        position: static;
        height: auto;
        display: flex;
        gap: 12px;
    }

    .luxury-img-1,
    .luxury-img-2,
    .luxury-img-01,
    .luxury-img-02 {
        position: static;
        width: 50%;
        height: 280px;
    }

    .luxury-img-1 {
        margin-top: 80px;
    }

    .luxury-img-02 {
        margin-top: 80px;
    }

    .luxury-img {
        position: static;
        width: 100%;
    }

    .luxury-images img {
        height: 100%;
        object-fit: cover;
    }
    .hero-content {
        width: 100%;
    }

    .subheading {
        font-size: 20px;
    }
}

@media (min-width: 768px) {
  .btn-gold, .btn-secondary {
    width: auto;
  }
}

.carousel-item{
text-align:center;
}

.carousel-item .testimonial-author{
display:flex;
justify-content:flex-start;
gap:15px;
margin-top:25px;
margin-bottom:80px;
}

.cta-section{
    background: url("../img/cta-bg.webp");
    background-position: center top;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

.cta-padding {
    padding: 80px 0;
}

.testimonial-overlay{
position:absolute;
inset:0;
background:rgba(10,12,18,0.75);
}

.testimonial-section .container{
position:relative;
z-index:2;
}

.testimonial-content{
max-width:700px;
margin:0 auto;      
text-align:center;
}

.testimonial-subtitle{
font-size:16px;
color:#c6a36c;
display:block;
margin-bottom:10px;
}

.testimonial-title{
font-family:'Gorni', serif;
font-size:36px;
margin-bottom:20px;
}

.testimonial-text{
color:#fbfdff;
line-height:1.7;
margin-bottom:30px;
}

.testimonial-author{
display:flex;
align-items:center;
justify-content:flex-start;
margin-left:auto;
margin-right:auto;
gap:15px;
margin-bottom: 60px;
}

.testimonial-author-info{
text-align:left;
}

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

.stars{
color:#c6a36c;
font-size:14px;
margin-bottom:4px;
}

.author-name{
margin:0;
font-size:14px;
letter-spacing:1px;
}

.author-role{
font-size:12px;
color:#aaa;
}

.carousel-indicators{
bottom:20px;
gap:10px;
}

.carousel-indicators [data-bs-target]{
width:10px;
height:10px;
border-radius:50%;
background:#fff;
opacity:0.4;
border:none;
flex:0 0 auto;
margin:0;
padding:0;
}

.carousel-indicators .active{
opacity:1;
background:#d89f1d; 
}

.events-section{
background:#18181b;
padding:120px 0;
color:white;
}

.events-header{
margin-bottom:60px;
}

.events-subtitle{
color:#c6a36c;
letter-spacing:3px;
font-size:16px;
display:block;
margin-bottom:10px;
}

.events-title{
font-family:'Gorni', serif;
font-size:48px;
}

.event-card{
position:relative;
}

.event-image{
position:relative;
overflow:hidden;
}

.event-image img{
width:100%;
height:450px;
object-fit:cover;
display:block;
}

/* CONTENT PANEL */

.event-content{
position:absolute;
bottom:-30px;
left:30px;
right:30px;

background:#1b1d23;
padding:30px;
}

.event-category{
color:#c6a36c;
font-size:12px;
letter-spacing:2px;
display:block;
margin-bottom:8px;
}

.event-content h4{
font-family:'Gorni', serif;
font-size:22px;
line-height:1.3;
}

.event-card:hover img{
transform:scale(1.05);
transition:.6s;
}

.booking-section{
background:url("../img/hero-img.webp") center/cover no-repeat;
padding:140px 0;
position:relative;
color:white;
}

.booking-section::before{
content:"";
position:absolute;
inset:0;
background:rgba(10,12,18,0.55);
}

.booking-section .container{
position:relative;
z-index:2;
}

/* LEFT SIDE */

.booking-stars{
color:#c6a36c;
font-size:20px;
letter-spacing:6px;
margin-bottom:30px;
}

.booking-text{
font-family:'Gorni', serif !important;
font-size:32px;
line-height:1.3;
max-width:520px;
margin-bottom:40px;
}

.booking-phone{
display:flex;
gap:20px;
align-items:center;
}

.phone-icon{
font-size:40px;
color:white;
}

.phone-label{
display:block;
opacity:.7;
}

.phone-note{
font-size:14px;
opacity:.8;
margin-top:42px;
}

/* BOOKING CARD */

.booking-card{
background:#463c32;
padding:40px;
color:white;
}

.booking-eyebrow{
color:#fbfdff;
font-size:16px;
display:block;
margin-bottom:10px;
}

.booking-card h3{
font-family:'Gorni', serif;
margin-bottom:20px;
color:#c6a36c;
}

.booking-card hr{
border-color:rgba(255,255,255,0.1);
margin-bottom:30px;
}

.booking-input{
background:#4f463c;
border:none;
color:white;
margin-bottom:20px;
padding:16px;
}

.booking-input::placeholder{
color:#8a8f98; 
opacity:1; 
}

.booking-input:focus{
background:#4f463c;
color:white;
box-shadow:none;
}

.booking-btn{
background:#c6a36c;
color: #fbfdff;
border:none;
width:100%;
padding:18px;
font-weight:500;
}

.booking-btn:hover{
background:#b4945f;
}

.site-footer{
background:#18181b;
color:#cfd3dc;
padding:100px 0;
}

.footer-title{
font-family:'Gorni', serif;
color:white;
font-size:28px;
margin-bottom:25px;
}

/* ABOUT */

.footer-about p{
line-height:1.8;
margin-bottom:30px;
width: 90%;
}

.footer-logo{
    width:160px; 
    height:auto;  
    margin-bottom: 20px;
    margin-top: -40px;
}

/* LINKS */

.footer-links ul{
list-style:none;
padding:0;
margin:0;
}

.footer-links li{
margin-bottom:14px;
}

.footer-links a{
color:#cfd3dc;
text-decoration:none;
transition:.3s;
}

.footer-links a:hover{
color:#c6a36c;
}

/* CONTACT */

.footer-phone{
display:flex;
align-items:center;
gap:12px;
font-size:22px;
margin:20px 0;
color:white;
}

.footer-email{
display:inline-block;
margin-bottom:25px;
color:#cfd3dc;
text-decoration:none;
padding-bottom:3px;
}

/* SOCIAL */

.footer-social i{
margin-right:18px;
font-size:18px;
cursor:pointer;
transition:.3s;
}

.footer-social i:hover{
color:#c6a36c;
}

.footer-bottom{
background:#18181b;
padding:30px 0;
position:relative;
}

.footer-bottom .container{
display:flex;
align-items:center;
justify-content:center;
position:relative;
}

.scroll-top{
position:absolute;
right:20px;
top:50%;
transform:translateY(-50%);
}

.copyright{
margin:0;
font-size:14px;
}

.copyright span{
color:white;
}

/* SCROLL TOP BUTTON */

.scroll-top{
position:absolute;
right:0;

width:50px;
height:50px;

border-radius:50%;
border:1px solid #c6a36c;

background:transparent;
color:#c6a36c;

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

transition:.3s;
}

.scroll-top:hover{
background:#c6a36c;
color:#0b0d12;
}