/* General Reset */
body { font-family: 'Segoe UI', Arial, sans-serif; background: #f4f4f4; margin: 0; color: #333; line-height: 1.6; }

/* Header & Logo */
header {
    background: #003366;
    color: white;
    padding: 15px 20px;
    border-bottom: 4px solid #ffc107;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.logo-area h1 { margin: 0; font-size: 28px; letter-spacing: 1px; }
.tagline { margin: 5px 0 0 0; font-size: 14px; color: #ffc107; font-weight: bold; font-style: italic; }

/* Search Area */
.search-area form {
    display: flex;
    background: white;
    border-radius: 4px;
    overflow: hidden;
    width: 300px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.search-area input { border: none; padding: 10px 12px; outline: none; width: 100%; font-size: 14px; }
.search-area button { background: #ffc107; border: none; padding: 10px 15px; cursor: pointer; font-weight: bold; color: #003366; transition: 0.3s; }
.search-area button:hover { background: #e0a800; }

/* Navigation */
nav { background: #002244; padding: 12px; text-align: center; position: sticky; top: 0; z-index: 1000; }
nav a { color: white; margin: 0 12px; text-decoration: none; font-weight: bold; font-size: 14px; text-transform: uppercase; transition: 0.3s; }
nav a:hover { color: #ffc107; }

/* Main Grid Layout */
.main-container { 
    max-width: 1250px; 
    margin: 20px auto; 
    display: flex; 
    flex-wrap: wrap; 
    gap: 15px; 
    justify-content: center;
    padding: 0 10px;
}

.column { 
    background: white; 
    border: 1px solid #ddd; 
    flex: 0 1 380px; 
    min-height: 350px; 
    display: flex;
    flex-direction: column;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.column h2 { margin: 0; padding: 12px; text-align: center; font-size: 19px; color: white; }

/* Category Colors */
.result-head { background: #28a745; } 
.admit-head  { background: #ffc107; color: #000 !important; } 
.job-head    { background: #dc3545; } 
.ak-head     { background: #17a2b8; } 
.adm-head    { background: #6f42c1; } 
.oth-head    { background: #343a40; } 

.column a { 
    display: block; 
    padding: 10px 15px; 
    color: #333; 
    text-decoration: none; 
    border-bottom: 1px solid #f0f0f0; 
    font-size: 14px; 
    font-weight: 500;
}

.column a:hover { background: #f8f9fa; color: #0056b3; text-decoration: underline; }

.view-all { 
    text-align: center; 
    font-weight: bold; 
    color: #007bff !important; 
    margin-top: auto; 
    padding: 12px; 
    background: #fdfdfd;
    border-top: 1px solid #eee !important;
}

/* Post Content / Details Styling */
.content table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; }
.content table th, .content table td { border: 1px solid #ccc; padding: 10px; text-align: left; }
.content table th { background: #f8f9fa; color: #003366; }
.content a { color: #dc3545; font-weight: bold; text-decoration: none; }
.content a:hover { text-decoration: underline; }

/* Responsive Mobile View */
@media (max-width: 768px) {
    .header-content { flex-direction: column; text-align: center; }
    .logo-area { margin-bottom: 15px; }
    .search-area form { width: 100%; }

    .column {
        flex: 0 1 calc(50% - 10px); 
        min-height: 280px;
    }

    /* Column Order Fix */
    .column:nth-child(1) { order: 1; } /* Result */
    .column:nth-child(2) { order: 3; } /* Admit Card */
    .column:nth-child(3) { order: 2; } /* Latest Job (Top 2) */
    .column:nth-child(4) { order: 4; } 
    .column:nth-child(5) { order: 5; } 
    .column:nth-child(6) { order: 6; }

    nav { overflow-x: auto; white-space: nowrap; }
    nav a { font-size: 12px; margin: 0 8px; }
    
    /* Table Responsive for Mobile */
    .content table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 480px) {
    .column { flex: 0 1 100%; } /* Chote mobile par ek column */
}