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

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    overflow-x: hidden;
    width: 100%;
}

html{
    scroll-behavior:smooth;
}

body{
font-family:Arial, sans-serif;
background:#0d0d0d;
color:white;
}

.hero-logo{
    width: 140px;
    max-width: 40vw;
    height: auto;
    display: block;
    margin: 0 auto 20px;
}

.hero{
position:relative;
height:100vh;
overflow:hidden;

}

.hero-content {
    width: 100%;
    max-width: 900px;
    margin: auto;
    padding: 0 20px;
}

.slider{
position:absolute;
width:100%;
height:100%;
}

.slide{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;

    opacity:0;

    transform:scale(1);

    transition:
        opacity 2.5s ease,
        transform 8s linear;
}

.slide.active{
    opacity:1;
    transform:scale(1.12);
}

.slide.active{
opacity:1;
}

.overlay{
position:absolute;

width:100%;
height:100%;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

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

text-align:center;
}

.overlay h1{
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    color:#D4AF37;
    letter-spacing:2px;
    text-align:center;
    padding:0 15px;
    line-height:1.1;
    word-break: break-word;
}

.overlay p{
    font-size: clamp(1rem, 4vw, 1.5rem);
    margin:20px 15px;
    text-align:center;
}

.btn{

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

color:#111;

padding:18px 45px;

border-radius:50px;

font-size:18px;

font-weight:bold;

text-decoration:none;

transition:.4s;

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

}

.btn:hover{

transform:translateY(-4px);

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

}




.map{

padding:80px 10%;

background:#111;

}

.map h2{

text-align:center;

margin-bottom:30px;

color:gold;

}

.map iframe{

width:100%;

height:450px;

border:none;

border-radius:20px;

}

.section-title{

font-size:48px;

text-align:center;

color:#D4AF37;

letter-spacing:3px;

margin-bottom:20px;

}

.service-card{

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

backdrop-filter:blur(12px);

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

border-radius:20px;

padding:40px;

transition:.5s;

}

.service-card:hover{

transform:translateY(-10px);

}

/* CONTACT */

#contact{

    padding:100px 10%;

    text-align:center;

    color:white;

    background:linear-gradient(
        -45deg,
        #000000,
        #111111,
        #D4AF37,
        #000000,
        #1a1a1a,
        #D4AF37
    );

    background-size:400% 400%;

    animation:luxuryGradient 20s ease infinite;

}

#contact h2{

    color:#FFD700;

    margin-bottom:25px;

    font-size:42px;

}

#contact p{

    font-size:20px;

    line-height:1.8;

    margin-bottom:40px;

}

#contact iframe{

    width:100%;

    height:450px;

    border:none;

    border-radius:20px;

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

}



/* FOOTER */

footer{

    padding:60px 10%;

    text-align:center;

    color:white;

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

    background-size:400% 400%;

    animation:luxuryGradient 20s ease infinite;

}

footer h3{

    color:#FFD700;

    font-size:34px;

    margin-bottom:15px;

}

footer p{

    margin:10px 0;

    color:#f5f5f5;

    letter-spacing:1px;

}



/* Animated Gradient */

@keyframes luxuryGradient{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}

/* Center all content from About to Footer */

.about,
#services,
#gallery,
#booking,
#contact,
footer {

    text-align: center;

}

.about p,
#booking p,
#contact p,
footer p {

    max-width: 900px;

    margin: 20px auto;

    line-height: 1.8;

}

.section-title {

    text-align: center;

}

.services {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 30px;

}

.gallery {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 20px;

}

/* Gallery */

.gallery{

    columns:4 250px;

    column-gap:18px;

    padding:60px;

}

.gallery-item{

    margin-bottom:18px;

    overflow:hidden;

    border-radius:20px;

    cursor:pointer;

}

.gallery-item img{

    width:100%;

    display:block;

    border-radius:20px;

    transition:.6s;

}

.gallery-item:hover img{

    transform:scale(1.08);

    filter:brightness(1.1);

    box-shadow:0 0 35px rgba(212,175,55,.6);

}

/* Lightbox */

.lightbox{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

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

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.lightbox img{

    max-width:90%;

    max-height:90%;

    border-radius:20px;

}

.close{

    position:absolute;

    top:40px;

    right:50px;

    color:white;

    font-size:45px;

    cursor:pointer;

}

.gallery-item{

opacity:0;

transform:translateY(60px);

transition:1s;

}

.gallery-item.show{

opacity:1;

transform:translateY(0);

}

/* Floating menu button */

.menu-btn{

    position:fixed;

    top:25px;

    left:50%;

    transform:translateX(-50%);

    width:50px;

    height:40px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    cursor:pointer;

    z-index:100000;

}

.menu-btn span{

    height:4px;

    width:100%;

    background:#D4AF37;

    border-radius:20px;

}

/* Full screen overlay menu */

.menu-overlay{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100vh;

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

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

/* Menu */

.menu{

    display:none;

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100vh;

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

    justify-content:center;

    align-items:center;

    flex-direction:column;

    z-index:99999;

}

.menu.show{

    display:flex;

}

.menu a{

    color:#D4AF37;

    text-decoration:none;

    font-size:34px;

    font-family:'Cinzel', serif;

    margin:20px;

    transition:.3s;

}

.menu a:hover{

    color:white;

    transform:scale(1.1);

}

.whatsapp-btn{

    display:inline-block;

    margin-top:30px;

    padding:18px 40px;

    background:#25D366;

    color:white;

    text-decoration:none;

    font-size:18px;

    font-weight:bold;

    border-radius:50px;

    transition:.4s;

    box-shadow:0 0 25px rgba(37,211,102,.4);

}

.whatsapp-btn:hover{

    transform:translateY(-5px);

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

}

.menu{

    display:none;

}

.menu.show{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

@media (max-width: 768px){

    .overlay h1{
        font-size: 3rem;
        letter-spacing: 1px;
    }

    .overlay p{
        font-size: 1.3rem;
    }

    .btn{
        width:90%;
        max-width:320px;
        text-align:center;
    }

    .hero-logo{
    width: 100px;
    max-width: 35vw;
    margin-bottom: 15px;
}

}