:root {
    --primary-color: #003366;
    /* Dark Blue */
    --secondary-color: #FFCC00;
    /* Gold/Yellow accent */
    --text-color: #333;
    --light-bg: #f4f4f4;
    --white: #fff;
    --border-radius: 8px;
    --transition: all 0.3s ease;
}

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--white);
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* Header */
/* --- TOP BAR --- */
.top-bar {
    background: #00204a;
    /* Deep Navy Blue */
    color: #fff;
    padding: 15px 0;
    border-bottom: none;
}

.social-icons a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    background: #ffcc00;
    /* Yellow */
    color: #00204a;
    border-radius: 50%;
    margin-left: 8px;
    font-size: 0.9rem;
    transition: var(--transition);
}

.social-icons a:hover {
    background: #fff;
    color: #00204a;
}

/* --- NAVIGATION PILL --- */
.nav-wrapper {
    background: #00204a;
    /* Blue background behind pill */
    padding: 0 0 30px 0;
    /* Add bottom padding so pill creates real space or overlaps naturally */
    position: relative;
    z-index: 9999 !important;
    /* Force top layer */
}

.nav-pill-container {
    background: #fff;
    border-radius: 50px;
    padding: 10px 30px;
    display: flex;
    justify-content: space-between;
    /* Distribute space */
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    top: 25px;
    margin-bottom: -25px;
    width: 100%;
}

/* Make nav take natural space */
.nav-pill-container nav {
    margin-right: auto;
    /* Push actions to the right */
    padding-right: 20px;
}

.nav-pill-container nav>ul {
    display: flex;
    flex-wrap: nowrap;
    /* Force single line */
    align-items: center;
    gap: 10px;
    /* Reduced gap for safety */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.nav-pill-container nav>ul>li {
    display: block;
    position: relative;
}

.nav-pill-container nav>ul>li>a {
    text-decoration: none;
    color: #333 !important;
    font-weight: 600;
    /* Bolder */
    font-size: 1rem;
    padding: 10px 15px;
    display: inline-block;
    /* Changed from flex to block-like */
    white-space: nowrap;
}

.nav-pill-container nav>ul>li>a i {
    margin-left: 5px;
    font-size: 0.8rem;
}

.nav-pill-container nav>ul>li>a.active,
.nav-pill-container nav>ul>li>a:hover {
    color: #ffcc00 !important;
    /* Yellow highlight */
}

/* Dropdown Styles */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 10px 0;
    z-index: 10000;
    /* Higher than nav */
    flex-direction: column;
    gap: 0 !important;
    border: 1px solid #eee;
}

.nav-pill-container nav>ul>li:hover .dropdown-menu {
    display: flex !important;
    /* Force show on hover */
}

.dropdown-menu li {
    width: 100%;
    display: block;
}

.dropdown-menu li a {
    padding: 10px 20px;
    color: #333 !important;
    font-size: 0.9rem;
    width: 100%;
    display: block;
    border-bottom: 1px solid #f9f9f9;
}

.dropdown-menu li:last-child a {
    border-bottom: none;
}

.dropdown-menu li a:hover {
    background: #f4f4f4;
    color: var(--secondary-color) !important;
    padding-left: 25px;
    /* Slide effect */
}

.small-icon {
    font-size: 0.7rem;
    margin-top: 2px;
}

/* --- HEADER BUTTONS --- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn-login-yellow {
    background: #ffcc00;
    color: #fff;
    /* Text white as per common design, or dark depending on screenshot contrast. Screenshot looks white text? Wait. Screenshot: "Login" text white? Hard to tell, usually yellow bg has dark text or white. Let's assume white for contrast or dark blue. Screenshot has White Text on Yellow Button usually. Actually common UI is dark text on yellow. Let's try white first. Wait, screenshot looks like White text on Yellow button. */
    color: #fff;
    padding: 10px 30px;
    border-radius: 30px;
    font-weight: bold;
    text-transform: capitalize;
    box-shadow: 0 4px 6px rgba(255, 204, 0, 0.3);
    transition: all 0.3s;
}

.btn-login-yellow:hover {
    background: #e6b800;
    transform: translateY(-2px);
}

.btn-playstore img {
    height: 35px;
    /* Adjusted in HTML but good to enforce */
}

/* --- HERO ADJUSTMENT --- */
/* Since nav is inside a blue wrapper, the hero starts after it. 
   If we want the nav to OVERLAP the hero, we need negative margin on hero or absolute pos on nav.
   For now, we will let it stack naturally as per typical "Top Header" design.
*/
.hero-section {
    padding: 0 !important;
    /* Override default section padding */
    position: relative;
    /* If we want the overlapping header to work well, we might need no margin */
}

.main-slider {
    position: relative;
    height: 600px;
    background: #000;
}

.slide-item {
    display: none;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

.slide-item.active {
    display: block;
    animation: fadeIn 1s;
}

.slide-item .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 32, 74, 0.4);
    /* Blue-ish tint match */
}

.slide-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* Align left as per typical design */
    color: #fff;
    padding-left: 50px;
}

.slide-content h1 {
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.slide-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    max-width: 600px;
}

.slider-prev,
.slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: none;
    padding: 15px;
    cursor: pointer;
    font-size: 1.5rem;
    border-radius: 50%;
    z-index: 10;
    transition: 0.3s;
}

.slider-prev:hover,
.slider-next:hover {
    background: var(--secondary-color);
    color: var(--primary-color);
}

.slider-prev {
    left: 20px;
}

.slider-next {
    right: 20px;
}

@keyframes fadeIn {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

/* Hero Section */
.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/hero-bg.jpg');
    /* Placeholder */
    background-size: cover;
    background-position: center;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.btn {
    display: inline-block;
    background: var(--secondary-color);
    color: var(--primary-color);
    padding: 10px 20px;
    border-radius: var(--border-radius);
    font-weight: bold;
    transition: var(--transition);
}

.btn:hover {
    background: #e6b800;
}

/* Sections */
section {
    padding: 60px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
}

.section-title h2 {
    color: var(--primary-color);
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.section-title p {
    color: #666;
}

/* About/Mission Cards */
.mission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.card {
    background: var(--white);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: var(--transition);
}

.card:hover {
    transform: translateY(-5px);
}

.card h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

/* Facilities */
.facilities {
    background: var(--light-bg);
}

/* Footer */
footer {
    background: #002244;
    color: var(--white);
    padding: 40px 0 20px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-col h3 {
    color: var(--secondary-color);
    margin-bottom: 20px;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.copyright {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}