: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;
    padding: 0 0 30px 0;
    position: relative;
    z-index: 9999 !important;
}

.nav-pill-container {
    background: #fff;
    border-radius: 50px;
    padding: 10px 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    top: 25px;
    margin-bottom: -25px;
    width: 100%;
}

@media (max-width: 991px) {
    .nav-pill-container {
        border-radius: 15px;
        top: 10px;
        margin-bottom: 0px;
        padding: 10px 20px;
    }
    
    .nav-wrapper {
        padding-bottom: 15px;
    }
    
    .navbar-collapse {
        padding-top: 15px;
    }
    
    .nav-link {
        padding: 10px 0 !important;
        border-bottom: 1px solid #f0f0f0;
    }
}

.nav-link:hover {
    color: #ffcc00 !important;
}

/* Dropdown Styles */
.dropdown-menu {
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

@media (min-width: 992px) {
    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
    }
}

.dropdown-item:hover {
    background: #f4f4f4;
    color: var(--secondary-color) !important;
    padding-left: 25px;
    transition: all 0.3s;
}

.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;
}

/* Global Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(5px);
}

.modal-content-custom {
    transition: transform 0.3s ease;
}

.modal-overlay:target .modal-content-custom {
    transform: scale(1.05);
}