/* Base Styles & Reset */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { line-height: 1.6; color: #333; background-color: #f9f9f9; scroll-behavior: smooth; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Header & Navigation */
header { background-color: #ffffff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 100; }
.header-container { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; }
.logo-placeholder { background-color: #003366; color: white; padding: 10px 20px; font-weight: bold; border-radius: 4px; font-size: 1.2rem; }

/* Desktop Navigation */
.nav-links { list-style: none; display: flex; gap: 20px; align-items: center; }
.nav-links > li > a { text-decoration: none; color: #333; font-weight: 600; padding: 10px 5px; transition: color 0.3s; }
.nav-links > li > a:hover { color: #00509e; }
.cta-btn { background-color: #00509e; color: white !important; padding: 10px 20px !important; border-radius: 5px; margin-left: 10px; }
.cta-btn:hover { background-color: #003366; }

/* Dropdown */
.dropdown { position: relative; display: inline-block; }
.dropdown-content { display: none; position: absolute; background-color: #ffffff; min-width: 240px; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); z-index: 1; top: 100%; left: 0; border-top: 3px solid #00509e; border-radius: 0 0 4px 4px; }
.dropdown-content a { color: #333; padding: 12px 16px; text-decoration: none; display: block; font-weight: 500; border-bottom: 1px solid #f0f0f0; }
.dropdown-content a:hover { background-color: #f4f7f6; color: #00509e; padding-left: 20px; transition: 0.3s; }
.dropdown:hover .dropdown-content { display: block; }

/* Mobile Hamburger Menu */
.hamburger { display: none; font-size: 1.8rem; cursor: pointer; color: #003366; }

/* Hero Section */
.hero { background-color: #cccccc; height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; background-image: linear-gradient(rgba(0,51,102,0.85), rgba(0,51,102,0.85)); color: white; padding: 20px; }
.hero h1 { font-size: 3.5rem; margin-bottom: 15px; max-width: 900px; animation: slideDown 0.8s ease-out; }
.hero p { font-size: 1.2rem; margin-bottom: 30px; max-width: 700px; margin-left: auto; margin-right: auto; animation: slideUp 0.8s ease-out; }
.hero-buttons { display: flex; gap: 15px; justify-content: center; }

/* Buttons */
.btn { background-color: #e6a822; color: #003366; padding: 14px 30px; text-decoration: none; font-weight: bold; border-radius: 5px; border: none; cursor: pointer; font-size: 1rem; transition: all 0.3s; }
.btn:hover { background-color: #cf961d; transform: translateY(-2px); }
.btn-outline { background-color: transparent; border: 2px solid #e6a822; color: #e6a822; }
.btn-outline:hover { background-color: #e6a822; color: #003366; }

/* Stats & Outcomes */
.stats-section { padding: 60px 20px; background-color: #fff; }
.stats-section h2 { color: #003366; font-size: 2.2rem; margin-bottom: 15px; }
.lead-text { font-size: 1.1rem; color: #555; max-width: 800px; margin: 0 auto 40px auto; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.stat-box { background: #00509e; color: white; padding: 30px 20px; border-radius: 8px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.3s; }
.stat-box:hover { transform: translateY(-5px); }
.stat-box h3 { font-size: 3rem; color: #e6a822; margin-bottom: 10px; }

/* Tabs */
.tab-container { background: white; padding: 40px; margin: 40px auto; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.tab-buttons { display: flex; border-bottom: 2px solid #eee; margin-bottom: 30px; }
.tab-btn { background: none; border: none; padding: 15px 30px; font-size: 1.1rem; font-weight: 600; color: #777; cursor: pointer; transition: all 0.3s; }
.tab-btn:hover, .tab-btn.active { color: #003366; border-bottom: 3px solid #00509e; }
.tab-content { display: none; animation: fadeIn 0.4s ease-in-out; }
.tab-content h3 { color: #003366; margin-bottom: 15px; font-size: 1.8rem; }
.detail-list { margin-top: 15px; list-style: none; line-height: 2; }
.detail-list i { color: #00509e; width: 25px; }

/* Accordion FAQ */
.faq-section { background-color: #fff; padding: 60px 20px; }
.accordion { max-width: 800px; margin: 0 auto; }
.accordion-btn { background-color: #f4f7f6; color: #003366; cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; font-size: 1.1rem; font-weight: bold; border-radius: 5px; margin-bottom: 10px; transition: 0.4s; display: flex; justify-content: space-between; align-items: center; }
.accordion-btn.active, .accordion-btn:hover { background-color: #eef2f5; }
.accordion-content { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; margin-bottom: 10px; border-left: 3px solid #00509e; }
.accordion-content p { padding: 15px 0; }

/* Layouts & Cards */
.split-layout { display: flex; gap: 40px; align-items: center; }
.split-layout > * { flex: 1; }
.image-placeholder { background-color: #eef2f5; border: 2px dashed #b0c4de; height: 350px; display: flex; align-items: center; justify-content: center; color: #666; border-radius: 8px; font-weight: bold; font-size: 1.2rem; }
.cards { display: flex; gap: 20px; margin-top: 20px; }
.card { background: #f4f7f6; padding: 25px; border-radius: 8px; flex: 1; border-left: 5px solid #00509e; }

/* Contact & Footer */
.contact-section { background-color: #eef2f5; padding: 80px 20px; }
.contact-form form { display: flex; flex-direction: column; gap: 15px; background: white; padding: 40px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.contact-form input, .contact-form textarea, .contact-form select { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; }
footer { background-color: #001a33; color: white; }
.text-center { text-align: center; }

/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Mobile Responsive Adjustments */
@media (max-width: 900px) {
    .split-layout, .cards { flex-direction: column; }
    .hero h1 { font-size: 2.5rem; }
    
    /* Mobile Menu Logic */
    .hamburger { display: block; }
    #nav-menu { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: white; box-shadow: 0 4px 10px rgba(0,0,0,0.1); padding: 20px; }
    #nav-menu.show { display: block; }
    .nav-links { flex-direction: column; align-items: flex-start; gap: 10px; }
    .nav-links > li { width: 100%; }
    .nav-links > li > a { display: block; width: 100%; padding: 10px 0; border-bottom: 1px solid #eee; }
    .dropdown-content { position: static; box-shadow: none; border-left: 2px solid #00509e; border-top: none; padding-left: 10px; margin-top: 10px; }
    .dropdown:hover .dropdown-content { display: none; /* Disable hover on mobile */ }
    .dropdown.active .dropdown-content { display: block; /* Use click on mobile */ }
    
    .tab-buttons { flex-direction: column; }
    .tab-btn { text-align: left; border-bottom: 1px solid #eee; }
    .tab-btn.active { border-left: 3px solid #00509e; border-bottom: 1px solid #eee; }
}