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


.header{

position:absolute;

top:25px;

width:98%;

z-index:1000;

}



.floating-nav{


height:80px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 35px;


background:

rgba(10,10,10,0.75);


border:

1px solid rgba(255,255,255,0.15);


border-radius:60px;


backdrop-filter:blur(15px);


box-shadow:

0 15px 40px rgba(0,0,0,.35);


}



.logo{


display:flex;

align-items:center;

gap:12px;


color:white;

text-decoration:none;


font-size:24px;

font-weight:800;


}



.logo i{

color:#c9a227;

font-size:30px;

}



.logo span{


display:block;

font-size:10px;

letter-spacing:5px;

color:#c9a227;

}



.navbar ul{


display:flex;

gap:28px;

list-style:none;


}



.navbar a{


color:white;

font-size:14px;

text-decoration:none;


position:relative;


transition:.3s;


}



.navbar a:after{


content:"";

position:absolute;

bottom:-8px;

left:0;

width:0;

height:2px;

background:#c9a227;

transition:.3s;


}



.navbar a:hover:after{


width:100%;


}



.navbar a:hover{

color:#c9a227;

}




.nav-book{


background:#c9a227;

color:white;

padding:14px 25px;

border-radius:40px;

text-decoration:none;

font-weight:600;


display:flex;

align-items:center;

gap:8px;


transition:.3s;


}



.nav-book:hover{


background:white;

color:#111;


}



.menu-toggle{


display:none;

background:none;

border:none;

color:white;

font-size:28px;


}

.mobile-menu{


position:fixed;

inset:0;

background:#111;


display:flex;

align-items:center;

justify-content:center;


transform:translateY(-100%);


transition:.5s;


}



.mobile-menu.active{


transform:translateY(0);


}

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


.hero{

height:100vh;

min-height:750px;

position:relative;

display:flex;

align-items:center;

background-image:url("../images/hero.jpg");

background-size:cover;

background-position:center;

overflow:hidden;

}



/* Dark Premium Overlay */

.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(
90deg,
rgba(5,5,5,0.90) 0%,
rgba(5,5,5,0.70) 45%,
rgba(5,5,5,0.35) 100%
);

}



/* Container */

.hero-container{

width:90%;

max-width:1250px;

margin:auto;

position:relative;

z-index:2;

}



/* Content */

.hero-content{

max-width:720px;

color:white;

padding-top:70px;

}



/* Small Label */

.hero-label{


display:flex;

align-items:center;

gap:12px;


font-size:14px;

letter-spacing:3px;

font-weight:600;

color:#C9A227;


margin-bottom:25px;


}



.hero-label i{

font-size:22px;

}



/* Heading */


.hero h1{


font-size:clamp(45px,5vw,72px);

line-height:1.08;

font-weight:800;


letter-spacing:-1px;


margin-bottom:25px;


}



.hero h1 span{


color:#C9A227;


}



/* Description */


.hero-text{


font-size:18px;

line-height:1.8;

color:#e2e2e2;


max-width:620px;


margin-bottom:40px;


}



/* Buttons */


.hero-buttons{


display:flex;

gap:20px;

flex-wrap:wrap;


}



.hero-btn{


padding:16px 32px;


border-radius:50px;


display:flex;

align-items:center;

gap:10px;


font-size:16px;

font-weight:600;


text-decoration:none;


transition:.3s;


}



.hero-btn.primary{


background:#C9A227;

color:white;


}



.hero-btn.primary:hover{


background:white;

color:#111;


}



.hero-btn.secondary{


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

color:white;


}



.hero-btn.secondary:hover{


background:white;

color:#111;


}



/* Bottom Information */


.hero-info{


display:flex;

align-items:center;

gap:40px;


margin-top:50px;


}



.hero-rating,
.hero-location{


display:flex;

align-items:center;

gap:12px;


font-size:15px;

color:#ddd;


}



.stars i{


color:#C9A227;

font-size:14px;


}



.hero-location i{


color:#C9A227;

font-size:18px;


}

@media(max-width:768px){


.hero{


min-height:850px;

background-position:center;


}



.hero-container{


text-align:center;


}



.hero-content{


padding-top:100px;

margin:auto;


}



.hero-label{


justify-content:center;

font-size:12px;


}



.hero h1{


font-size:42px;


}



.hero-text{


font-size:16px;

margin-left:auto;

margin-right:auto;


}



.hero-buttons{


justify-content:center;


}



.hero-btn{


width:100%;

justify-content:center;


}



.hero-info{


flex-direction:column;

gap:20px;


justify-content:center;


}


}

body {
    margin: 0px !important;
}

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


.experience-section{

padding:120px 0;

background:#111;

}



.experience-heading{

max-width:850px;

margin:0 auto 70px;

text-align:center;

color:white;

}



.section-label{

display:flex;

justify-content:center;

align-items:center;

gap:12px;

color:#C9A227;

font-size:13px;

font-weight:600;

letter-spacing:3px;

margin-bottom:25px;

}



.experience-heading h2{


font-size:56px;

line-height:1.15;

font-weight:800;

margin-bottom:25px;


}



.experience-heading h2 span{


color:#C9A227;


}



.experience-heading p{


font-size:18px;

line-height:1.8;

color:#bcbcbc;

max-width:700px;

margin:auto;


}




/* CARDS GRID */


.experience-grid{


display:grid;


grid-template-columns:repeat(4,1fr);


gap:30px;


}





.experience-card{


background:#181818;


padding:45px 30px;


text-align:center;


border-radius:24px;


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


transition:.35s;


position:relative;


overflow:hidden;


}



.experience-card:before{


content:"";


position:absolute;


top:0;

left:0;


width:100%;

height:3px;


background:#C9A227;


transform:scaleX(0);


transition:.35s;


}



.experience-card:hover:before{


transform:scaleX(1);


}



.experience-card:hover{


transform:translateY(-12px);


}



.icon-box{


width:75px;

height:75px;


margin:0 auto 25px;


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;


background:rgba(201,162,39,.15);


}



.icon-box i{


font-size:30px;


color:#C9A227;


}



.experience-card h3{


font-size:22px;


color:white;


margin-bottom:15px;


}



.experience-card p{


color:#aaa;


font-size:15px;


line-height:1.7;


}

@media(max-width:1100px){

.experience-grid{

grid-template-columns:repeat(2,1fr);

}


}


@media(max-width:600px){

.experience-heading h2{

font-size:36px;

}


.experience-grid{

grid-template-columns:1fr;

}


}