/* --- 1. General Setup --- */
body { font-family: 'Segoe UI', Arial, sans-serif; background: #f4f4f4; margin: 0; color: #333; line-height: 1.6; }

/* --- 2. Header & Navigation --- */
header {
    background: #003366;
    color: white;
    padding: 10px 20px; /* PC par clean padding */
    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: 26px; letter-spacing: 1px; }
.tagline { margin: 2px 0 0 0; font-size: 13px; color: #ffc107; font-weight: bold; font-style: italic; }

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

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

/* --- 3. Main Grid Layout (PC) --- */
.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; }

/* --- 4. Mobile Responsive (The Fix) --- */
@media (max-width: 768px) {
    header { padding: 10px 5px; }
    .header-content { flex-direction: column; text-align: center; }
    .logo-area { margin-bottom: 10px; }
    .search-area form { width: 100%; max-width: 320px; margin: 0 auto; }

    .main-container { gap: 8px; padding: 5px; }

    .column {
        flex: 0 0 calc(50% - 8px) !important; /* Force 2 columns */
        max-width: calc(50% - 8px);
        min-height: 220px;
    }

    /* 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 h2 { font-size: 14px; padding: 8px; }
    .column a { font-size: 12px; padding: 8px 5px; }
    .view-all { padding: 8px; font-size: 12px; }

    nav { overflow-x: auto; white-space: nowrap; padding: 10px 5px; }
    nav a { font-size: 12px; margin: 0 8px; }
    
    .content table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Extra Small screens par bhi 2 column force kiya hai */
@media (max-width: 480px) {
    .column {
        flex: 0 0 calc(50% - 6px) !important;
        max-width: calc(50% - 6px);
    }
    .logo-area h1 { font-size: 22px; }
}

@media (max-width: 768px) {
    /* Mobile Order Logic */
    .column:nth-child(1) { order: 1; } /* Result */
    .column:nth-child(2) { order: 3; } /* Admit Card (Ye 3rd par jayega) */
    .column:nth-child(3) { order: 2; } /* Latest Job (Ye 2nd par aayega) */
    .column:nth-child(4) { order: 4; }
    .column:nth-child(5) { order: 5; }
    .column:nth-child(6) { order: 6; }
}