/* --- 1. DESKTOP BASE --- */
:root { --axbt-cyan: #00F2FF; --gold: #d4af37; }
* { margin: 0; padding: 0; box-sizing: border-box; }

/* FORCE SCREEN LOCK */
html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: fixed; /* This is a more aggressive lock for Safari */
    height: 100%;
    -webkit-overflow-scrolling: touch; /* Keeps the scrolling smooth */
}

/* Apply this to the main container too */
main {
    width: 100% !important;
    overflow-x: hidden !important;
}

body { background: #050505; color: #fff; font-family: 'Inter', sans-serif; overflow-x: hidden; }

/* Desktop Navigation */
.main-nav { background: rgba(0,0,0,0.9); border-bottom: 1px solid #111; padding: 20px 5%; }
.nav-container { display: flex; justify-content: space-between; align-items: center; max-width: 1400px; margin: 0 auto; }
.nav-links { display: flex; gap: 30px; list-style: none; }
.nav-links a { color: #888; text-decoration: none; font-size: 0.75rem; letter-spacing: 2px; }
.logo img { height: 50px; width: auto; }
/* This ensures the RESERVE NOW link always looks like a button */
nav ul li a[href="#packages"], .reserve-btn {
    color: #d4af37 !important;
    border: 1px solid #d4af37 !important;
    padding: 10px 20px !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    display: inline-block !important;
    margin-top: 5px;
}

/* Pillars Desktop */
#pillars > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }

/* --- 2. MOBILE FIX (THE SAFARI SOLUTION) --- */
@media screen and (max-width: 768px) {
    /* Stack Nav Neatly */
    .nav-container, .nav-links {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
    }
    
    /* Stack Pillars (Fixes the 'squish') */
    #pillars > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    /* Fix Hero Text */
    .hero-container h1 { font-size: 2rem !important; letter-spacing: 5px !important; }
	
	@media screen and (max-width: 768px) {
    header nav, .main-nav {
        position: relative !important;
        padding: 30px 5% !important; /* Added a bit more breathing room */
        background: #000 !important;
    }

    nav ul {
        flex-direction: column !important;
        gap: 15px !important; /* Space between the links */
        margin-top: 25px !important;
    }
}
}