@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;
}
.top-bar{
    background:#18181b;
    border-bottom:1px solid rgba(201,164,90,.18);
    position:relative;
    z-index:100;
}

.top-bar-content{
    height:40px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    font-size:14px;
    font-weight:300;
}

.top-link{
    display:flex;
    align-items:center;
    gap:8px;
    color:#eaeaea;
    text-decoration:none;
    transition:.3s;
}

.top-link i{
    color:#c9a45a;
    font-size:13px;
}

.top-link:hover{
    color:#c9a45a;
}

.top-divider{
    color:rgba(255,255,255,.35);
}

:root {
    --site-header-height: 96px;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;

    background: rgba(24, 24, 27, 0.96);
    border-bottom: 1px solid rgba(201, 164, 90, 0.2);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.site-header-inner {
    min-height: var(--site-header-height);
    padding: 10px 42px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
}

.site-header-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.site-header-inner{
    display:grid;
    grid-template-columns:1fr auto 1fr;
}
.site-header-location {
    color: #eaeaea;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1.2;
    text-transform: uppercase;
}

.site-header-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.site-header-logo-link {
    display: block;
    line-height: 0;
}

.site-header-logo {
    display: block;
    width: 200px;
    height: auto;
}

.site-header-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.site-header-booking {
    min-height: 48px;
    padding: 10px 28px;

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

    background: #d89f1d;
    border: 2px solid #d89f1d;
    color: #ffffff;

    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

.site-header-booking:hover,
.site-header-booking:focus {
    background: #cc971b;
    border-color: #cc971b;
    color: #ffffff;
}
@media (max-width:768px){

    .site-header-inner{
        grid-template-columns:auto 1fr;
        gap:16px;
        align-items:center;
    }

    .site-header-left{
        display:none;
    }

    .site-header-center{
        justify-content:flex-start;
    }

    .site-header-right{
        justify-content:flex-end;
    }

}
.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-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: 20%;
    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;
    font-size: 14px;
}

.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;
    font-size: 14px;
}

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

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

@media (max-width: 767px) {
    .hero .btn-gold,
    .hero .btn-secondary {
        width: 280px;
        max-width: calc(100vw - 48px);
        padding: 16px 20px !important;
        white-space: nowrap;
    }
}

.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-size: cover;
background-position: center;
background-repeat: no-repeat;
background:url("../img/hero-img.webp");
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-size: cover;
	background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.expansion-section{
    background-size: cover;
	background-position: center;
    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-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:20px 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;
}

.site-footer {
    background: #18181b;
    color: #cfd3dc;
    padding:28px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 70px;
}

.site-footer-brand {
    max-width: 600px;
}

.site-footer-logo {
    display: block;
    width:120px;
    height: auto;
    margin-bottom: 14px;
}

.site-footer-description {
    max-width: 520px;
    margin: 0;

    color: #b9bcc2;
    line-height: 1.4;
}

.site-footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.site-footer-label {
    margin-bottom: 5px;

    color: #c9a45a;
    font-family: "Gorni", serif;
    font-size: 18px;
    margin-bottom:10px;
    text-transform: uppercase;
}

.site-footer-contact-link {
    display: flex;
    align-items: center;
    gap: 12px;

    color: #eaeaea;
    font-size: 15px;
    line-height: 1.4;
    text-decoration: none;

    transition: color 0.3s ease;
}

.site-footer-contact-link i {
    width: 20px;
    color: #c9a45a;
    text-align: center;
}

.site-footer-contact-link:hover,
.site-footer-contact-link:focus {
    color: #c9a45a;
}

/* SCROLL TOP BUTTON */

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

width:30px;
height:30px;

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;
}
@media (max-width: 767px) {

    .site-footer {
        padding: 32px 0 24px;
    }

    .site-footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        align-items: center;
        text-align: center;
    }

    .site-footer-brand,
    .site-footer-contact {
        width: 100%;
        max-width: none;
    }

    .site-footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .site-footer-logo {
        width: 135px;
        margin: 0 auto 16px;
    }

    .site-footer-description {
        max-width: 360px;
        margin: 0 auto;
        line-height: 1.55;
        font-size: 15px;
    }

    .site-footer-contact {
        align-items: center;
        gap: 10px;
    }

    .site-footer-label {
        margin-bottom: 6px;
        font-size: 21px;
        text-align: center;
    }

    .site-footer-contact-link {
        justify-content: center;
        font-size: 14px;
        text-align: center;
    }

    .site-footer-contact-link i {
        flex: 0 0 20px;
    }

    .footer-bottom {
        padding: 20px 0;
    }

    .footer-bottom .container {
        justify-content: center;
        padding-right: 70px;
        padding-left: 70px;
    }

    .copyright {
        text-align: center;
        font-size: 13px;
    }

    .scroll-top {
        right: 15px;
        width: 42px;
        height: 42px;
    }
}