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

body { font-family:'Roboto',sans-serif; scroll-behavior:smooth; overflow-x:hidden; }

/* Menu button – enhanced hide */
.menu-button {
    position:fixed; top:20px; left:20px; width:60px; height:60px;
    background:rgba(0,0,0,0.9); color:white; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:2rem; cursor:pointer; z-index:1001; 
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease;
}
.menu-button:hover { background:#D4AF37; }

/* Stronger hidden class */
.menu-button.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Sliding menu – fixed logo position + smaller links */
.dynamic-menu {
    position:fixed; top:0; left:-100%; width:340px; height:100vh;
    background:rgba(0,0,0,0.98); padding:30px 20px; transition:.3s; z-index:1002;
    display:flex; flex-direction:column;
}
.dynamic-menu.active { left:0; }

/* Logo moved right – no more overlap */
.menu-header { 
    position: relative; 
    height: 90px; 
    margin-bottom: 30px;
}
.menu-logo { 
    height: 70px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%);
}
.close-menu { 
    position: absolute; 
    right: 10px; 
    top: 50%; 
    transform: translateY(-50%);
    background:none; border:none; color:white; font-size:2.4rem; cursor:pointer; 
}

/* Smaller, tighter menu links – fits all 9 items even on small phones */
.menu-list { 
    list-style:none; 
    flex-grow:1; 
    display:flex; 
    flex-direction:column; 
    justify-content:center; 
    gap: 8px;
    padding: 0 20px;
    overflow-y: auto;
}
.menu-list li a {
    color:white; 
    text-decoration:none; 
    font-size:1.55rem;
    font-weight:bold;
    padding:14px 0;
    display:block; 
    text-align:center;
    transition:.3s;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.menu-list li a:hover { 
    color:#D4AF37; 
    background:rgba(212,175,55,0.15);
    border-radius:8px;
}

/* FIXED TOP-RIGHT BUTTONS – always visible */
.fixed-top-buttons {
    position:fixed; top:20px; right:20px; z-index:999;
    display:flex; align-items:center; gap:15px;
}
.ig-btn {
    width:50px; height:50px; background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    color:white; border-radius:50%; font-size:1.8rem;
    display:flex; align-items:center; justify-content:center; transition:.3s;
}
.ig-btn:hover { transform:scale(1.15); }

.book-btn {
    background:#D4AF37; color:black; padding:12px 28px; border-radius:50px;
    text-decoration:none; font-weight:bold; font-size:1.1rem;
    box-shadow:0 4px 15px rgba(212,175,55,0.4); transition:.3s;
}
.book-btn:hover { transform:scale(1.08); animation:pulse 1.5s infinite; }

/* Sections – full image visible on ALL devices */
.section {
    height:100vh;
    background-size:contain !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-color:#000;
    opacity:0; transform:translateY(40px); transition:opacity 1s, transform 1s;
}
.section.visible { opacity:1; transform:translateY(0); }

/* Backgrounds – correct paths */
#home      { background-image:url('IMAGES/Home.png'); }
#about     { background-image:url('IMAGES/About.png'); }
#services  { background-image:url('IMAGES/Services.png'); }
#vision    { background-image:url('IMAGES/Vision.png'); }
#mission   { background-image:url('IMAGES/Mission.png'); }
#project   { background-image:url('IMAGES/Project.png'); }
#the-gym   { background-image:url('IMAGES/The Gym.png'); }
#team      { background-image:url('IMAGES/Team.png'); }
#contact   { background-image:url('IMAGES/Contact.png'); }

/* Mobile – extra safety */
@media (max-width:768px) {
    .section {
        background-size:contain !important;
        background-position:center center !important;
        background-attachment:scroll !important;
    }
    .fixed-top-buttons { top:15px; right:15px; gap:12px; }
    .ig-btn, .
book-btn { width:48px; height:48px; font-size:1.6rem; padding:0; display:flex; align-items:center; justify-content:center; }
    .book-btn { padding:10px 20px !important; font-size:1rem; }
}

/* Google Maps Footer */
#map-footer {
    background: #000;
    padding: 40px 20px;
    text-align: center;
    width: 100%;
}
.map-container {
    max-width: 1200px;
    margin: 0 auto;
}
#map-footer iframe {
    max-width: 100%;
    height: 400px;
    border-radius: 10px;
}
@media (max-width:768px) {
    #map-footer { padding: 20px 10px; }
    #map-footer iframe { height: 300px; }
}

/* WhatsApp */
.whatsapp-float {
    position:fixed; width:60px; height:60px; bottom:30px; right:30px;
    background:#25d366; color:white; border-radius:50%; font-size:35px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 15px rgba(0,0,0,0.4); z-index:999; transition:.3s;
}
.whatsapp-float:hover { transform:scale(1.15); background:#128c7e; }

@keyframes pulse {
    0%   { box-shadow:0 0 0 0 rgba(212,175,55,0.7); }
    70%  { box-shadow:0 0 0 15px rgba(212,175,55,0); }
    100% { box-shadow:0 0 0 0 rgba(212,175,55,0); }
}

/* Make sure menu scrolls smoothly on very small screens */
@media (max-height: 600px) {
    .menu-list { 
        justify-content: flex-start; 
        padding-top: 20px;
    }
}