/* --- 1. CORE BRANDING & COLORS --- */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Helvetica Neue', Arial, sans-serif; }
body { background-color: #f8f9fa; color: #333; line-height: 1.6; overflow-x: hidden; }

/* --- 2. THE UNIFIED HEADER (Bold White Branding) --- */
.navbar { 
    background: #004a99; padding: 12px 4%; display: flex; justify-content: space-between; 
    align-items: center; position: sticky; top: 0; z-index: 1000; border-bottom: 4px solid #28a745; 
}
.nav-left { display: flex; align-items: center; text-decoration: none; }
.nav-logo { height: 48px; width: auto; margin-right: 15px; }
.brand-name { font-size: 1.1rem; font-weight: 900; color: #ffffff !important; letter-spacing: 0.5px; text-transform: uppercase; }
.page-divider { color: rgba(255,255,255,0.3); margin: 0 15px; font-weight: 100; font-size: 1.4rem; }
.current-page-label { color: #ffffff; font-weight: 300; font-size: 1rem; }

.nav-links { list-style: none; display: flex; gap: 15px; }
.nav-links a { color: #ffffff; text-decoration: none; font-weight: bold; font-size: 0.8rem; text-transform: uppercase; transition: 0.3s; }
.nav-links a:hover, .nav-links a.active { color: #ffcc00; }

/* --- 3. HERO & BUTTONS --- */
.hero { height: 400px; display: flex; align-items: center; justify-content: center; text-align: center; color: white; background-size: cover; background-position: center; }
.slogan { font-size: 2.2rem; font-weight: 800; color: #ffcc00; text-transform: uppercase; text-shadow: 2px 2px 5px rgba(0,0,0,0.7); padding: 0 20px; margin-bottom: 20px; }

.btn-register {
    display: inline-block; padding: 18px 45px; background: #28a745; color: white;
    text-decoration: none; border-radius: 50px; font-weight: 900; text-transform: uppercase;
    font-size: 1.1rem; transition: 0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.btn-register:hover { background: #ffcc00; color: #004a99; transform: translateY(-3px); }

/* Backgrounds */
.home-hero { background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('hero-home.jpg'); }
.about-hero { background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('hero-about.jpg'); }
.schedule-hero { background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('hero-schedule.jpg'); }
.rates-hero { background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('hero-rates.jpg'); }

/* --- 4. LAYOUT COMPONENTS --- */
.container { max-width: 1100px; margin: auto; padding: 60px 20px; text-align: center; }
h2 { color: #004a99; font-size: 2.2rem; margin-bottom: 25px; text-transform: uppercase; }
.content-box { background: white; padding: 35px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); text-align: left; margin-bottom: 40px; border-left: 8px solid #28a745; }

/* --- 5. INTERACTIVE BUBBLES --- */
.bubble-container { display: flex; flex-direction: row; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 40px; }
.price-bubble { width: 230px; height: 230px; background: white; border-radius: 50%; border: 6px solid #004a99; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 10px 25px rgba(0,0,0,0.1); transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); padding: 20px; cursor: pointer; overflow: hidden; }
.price-bubble:hover { transform: scale(1.1); border-color: #ffcc00; }
.price-tag { font-size: 2.2rem; font-weight: 900; color: #004a99; }
.bubble-details { max-height: 0; opacity: 0; font-size: 0.8rem; color: #555; transition: 0.4s ease; font-weight: bold; }
.price-bubble:hover .bubble-details { max-height: 100px; opacity: 1; margin-top: 10px; }
.price-bubble.featured { border-color: #28a745; background: #fafffa; width: 260px; height: 260px; }
.price-bubble.sibling { border-color: #ffcc00; }

/* --- 6. TABLES & STAFF --- */
.pop-container { background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 45px rgba(0,0,0,0.15); border: 4px solid #004a99; margin: 35px 0; }
.schedule-table { width: 100%; border-collapse: collapse; text-align: left; }
.schedule-table thead { background: #004a99; color: white; }
.schedule-table th, .schedule-table td { padding: 18px 25px; border-bottom: 1px solid #eee; }

.staff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 40px; }
.staff-card { text-align: center; }
.staff-img { width: 180px; height: 180px; border-radius: 50%; border: 6px solid #ffcc00; object-fit: cover; margin-bottom: 15px; }

/* --- 7. REGISTRATION CARD --- */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 30px; text-align: left; }
.reg-card { background: white; padding: 40px; border-radius: 25px; box-shadow: 0 15px 40px rgba(0,0,0,0.1); border-top: 10px solid #28a745; }
.reg-card label { font-weight: 900; color: #004a99; text-transform: uppercase; font-size: 0.75rem; display: block; margin-bottom: 5px; }
.reg-card input, .reg-card select, .reg-card textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 10px; margin-bottom: 15px; font-size: 1rem; }
.submit-btn { background: #004a99; color: white; border: none; padding: 20px; width: 100%; border-radius: 12px; font-weight: 900; cursor: pointer; text-transform: uppercase; transition: 0.3s; }
.submit-btn:hover { background: #28a745; transform: translateY(-3px); }

/* --- 8. FOOTER --- */
footer { background: #1a1a1a; color: white; padding: 40px; text-align: center; margin-top: 60px; }
.footer-brand { color: #ffcc00; font-weight: 900; text-transform: uppercase; }