/* ================= RESET CSS ================= */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
}

/* Space for fixed navbar */
body{
padding-top:90px;
overflow-x:hidden;   /* ✅ FIX: remove horizontal scroll */
}

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

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 50px;
background:#0b8f3c;
border-bottom:2px solid gold;
position:fixed;
top:0;
width:100%;
z-index:1000;
}

/* LOGO */
.logo{
display:flex;
align-items:center;
}

.logo img{
height:70px;
width:70px;
border-radius:50%;
object-fit:cover;
border:3px solid gold;
}

/* NAV LINKS */

.nav-links{
list-style:none;
display:flex;
transition:all 0.3s ease;   /* ✅ smooth open */
}

.nav-links li{
margin-left:30px;
}

.nav-links a{
color:white;
text-decoration:none;
font-size:18px;
font-weight:bold;
}

/* ✅ FIX: better mobile tap */
.nav-links a:hover{
color:white;
}

/* MOBILE ICON */

.icon{
display:none;
font-size:26px;
color:white;
cursor:pointer;
}

/* ================= ABOUT HERO ================= */

.about-hero{
width:100%;
height:100vh;
background-image:url("../images/hotelpearl.jpeg");   
background-size:cover;
background-position:center;
background-color:rgba(0,0,0,0.6);
background-blend-mode:darken;
background-repeat:no-repeat;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}

/* TEXT STYLE */

.about-content h1{
font-size:60px;
color:yellow;
margin-bottom:15px;
}

.about-content p{
font-size:22px;
color:white;
}

/* ================= CONTACT ================= */

.contact{
padding:80px 20px;
text-align:center;
background:#f5f5f5;
}

.contact h1{
font-size:45px;
color:#0b8f3c;
display:inline-block;
border-bottom:5px solid yellow;
padding-bottom:5px;
}

.tagline{
color:#555;
margin-bottom:40px;
font-size:17px;
}

.info p{
margin-bottom:20px;
font-size:16px;
line-height:1.7;
}

.info span{
color:#0b8f3c;
font-weight:bold;
font-size:17px;
}

/* ================= MAP ================= */

.map{
font-size:30px;
text-align:center;
padding:40px 20px;
}

.map h2{
color:#0b8f3c;
display:inline-block;
border-bottom:5px solid yellow;
padding-bottom:5px;
margin-bottom:20px;
}

.map iframe{
width:100%;
height:400px;
border-radius:8px;
}

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

.footer{
background:#111;
color:white;
padding:50px 0;
}

footer a{
color:#8A2BE2;
text-decoration: underline;
}

.footer .row{
display:flex;
justify-content:space-around;
flex-wrap:wrap;
}

.footer-col{
margin:20px;
}

.footer-col h4{
color:gold;
margin-bottom:20px;
}

/* ================= POPUP ================= */

.popup{
display:none;
position:fixed;
z-index:2000;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
}

.popup-content{
background:white;
width:90%;
max-width:400px;
margin:10% auto;
padding:30px;
border-radius:20px;
text-align:center;
border-top:5px solid gold;
}

/* MOBILE NAVBAR */


.nav-links{
display:flex;
list-style:none;
}

.nav-links li{
margin:0 15px;
}

.nav-links a{
text-decoration:none;
color:white;
font-size:18px;
}

.icon{
display:none;
color:white;
font-size:22px;
cursor:pointer;
}

/* ================= MOBILE ================= */

@media(max-width:768px){

.nav-links{
display:none;
flex-direction:column;
width:100%;
background:#111;
position:absolute;
top:80px;
left:0;
}

.nav-links li{
margin:15px 0;
text-align:center;
}

.icon{
display:block;
}

.navbar.responsive .nav-links{
display:flex;
}

.hero-text h1{
font-size:35px;
}

.hero-text p{
font-size:18px;
}

}