/* ▬▬▬ GENERAL COLORS ▬▬▬ */
:root {
    --navy: #0A2342;
    --cream: #F5F2E9;
    --orange: #FF6F00;
}

/* 🚀 NEW: ROW 1: TOP BAR (For quick links, contact info, etc.) 🚀 */
#top-bar {
    width: 100%;
    background-color: #002b5c; /* Dark background */
    color: white;
    padding: 5px 0; /* Reduced padding for a thinner bar */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Add content and styling here (e.g., text-align: right; ) */
}


/* ▬▬▬ ROW 2: LOGO + TITLE ▬▬▬ */
.kargil-header {
    background: var(--cream);
    text-align: center;
    /* Reduced bottom padding to bring the menu closer */
    padding: 20px 0 5px; 
    /* The main border-bottom is now here */
    border-bottom: 4px solid var(--orange);
}

.kargil-logo img {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

.kargil-title {
    font-size: 30px;
    font-weight: 800;
    margin-top: 10px;
    color: var(--navy);
}

/* ▬▬▬ ROW 3: MENU (Gap Reduced Here) ▬▬▬ */
.kargil-menubar {
    background: #ffffff;
    text-align: center;
    /* REDUCED PADDING: Use minimal vertical padding */
    padding: 10px 0; 
    /* REMOVED BORDER: Moved the thick orange border to the kargil-header 
       to visually merge the logo and menu sections and save vertical space.
       If you want a border here, use 1px solid #ddd; instead of 4px. */
    border-bottom: none; 
    margin-bottom: 0 !important;
}

.kargil-menu {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 30px;
    /* REMOVED MARGIN/PADDING: Ensure no external margin is pushing the next element down */
    margin: 0; 
    padding: 0;
}

.kargil-menu li a {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--navy);
}

.kargil-menu li a:hover {
    border-bottom: 3px solid var(--orange);
}


/* ▬▬▬ ROW 4: BREADCRUMB (Default: Hidden on Desktop) ▬▬▬ */
.kargil-breadcrumb {
    /* HIDE by default for all screen sizes (Desktop first approach) */
    padding: 10px 12px;
    background: #f4f4f4;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
    text-align: left; 
}
.kargil-breadcrumb a {
    color: var(--navy);
    text-decoration: none;
    font-weight: 600;
}
.kargil-breadcrumb span {
    color: #666;
}

/* ▬▬▬ ROW 5: SLIDER/CONTENT BELOW MENU (Hypothetical for gap reduction) ▬▬▬ */
/* Apply this if your slider/next section is being pushed down by default margins */
#image-slider, .main-content-area {
    margin-top: 0 !important; /* Forces the element to start immediately after the menu */
}


/* ▬▬▬ MOBILE/TABLET STYLES (max-width: 768px) ▬▬▬ */
@media(max-width: 768px) {
    /* Logo and Title Adjustments */
    .kargil-logo img {
        width: 70px;
        height: 70px;
    }
    .kargil-title {
        font-size: 20px;
    }
    
    /* Menu Toggle and Dropdown Styles (kept from previous code) */
    .kargil-menu-toggle {
        display: inline-block;
    }

    .kargil-menu {
        flex-direction: column;
        display: none;
        background: #fff;
        padding: 12px;
        border-top: 1px solid #ddd;
    }

    .kargil-menu.show {
        display: block;
    }

    /* SHOW BREADCRUMB ONLY ON MOBILE/TABLET */
    .kargil-breadcrumb {
        text-align: center; 
        padding: 8px 12px;
        font-size: 13px;
    }
}



/* hero slider */


#primary {
    margin: 0em 0;
}


/* 🚀 TOP BAR STYLING */
#top-bar {
    width: 100%;
    /* Use your navy color for a professional look */
    background-color: var(--navy); 
    color: white;
    padding: 6px 0; /* Keeps it thin */
    font-size: 13px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.top-bar-container {
    /* Use a max-width and center it, matching your main content width */
    max-width: 1200px; 
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    justify-content: space-between; /* Pushes left content to the left, right content to the right */
    align-items: center;
}

.top-bar-left a,
.top-bar-right a {
    color: white;
    text-decoration: none;
    margin: 0 8px;
    transition: color 0.2s;
}

.top-bar-left a:hover,
.top-bar-right a:hover {
    color: var(--orange); /* Highlight color on hover */
}

.separator {
    color: rgba(255, 255, 255, 0.5); /* Light gray separator */
}