/* --- 1. HEADER STYLES (Always Transparent & Blurred) --- */
.theme-main-header {
    background: rgba(0, 0, 0, 0.5) !important; 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 0;
    transition: all 0.3s ease;
}

.theme-main-header .navbar-nav > li > a {
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
}

.theme-main-header .navbar-nav > li.active > a,
.theme-main-header .navbar-nav > li > a:hover {
    color: #f6923d !important; /* Theme Orange */
}

/* --- 2. PAGE CONTENT STYLING --- */
.opp-hub-section {
    padding: 180px 0 100px 0;
    background-color: #f4f7fa; /* Appealing Soft Tech Background */
    background-image: 
        radial-gradient(at 0% 0%, rgba(124, 92, 224, 0.03) 0, transparent 50%), 
        radial-gradient(at 50% 0%, rgba(246, 146, 61, 0.03) 0, transparent 50%);
}

.opp-hub-section .sub-label {
    font-size: 12px;
    letter-spacing: 3px;
    color: #f6923d; 
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
    text-align: center;
}

.opp-hub-section h2 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #0b1c3d;
    text-align: center;
    text-transform: none;
}

/* --- 3. THE 3-CARD HUB (Main Page Cards) --- */
.opp-grid { margin-top: 60px; }

.opp-card {
    background: #ffffff;
    padding: 45px 30px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.03);
    margin-bottom: 30px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.opp-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(11, 28, 61, 0.1); 
    border-color: rgba(246, 146, 61, 0.3);
}

.opp-icon {
    width: 75px; height: 75px;
    background: #f4f7fa;
    color: #f6923d;
    font-size: 28px;
    line-height: 75px;
    border-radius: 15px;
    margin: 0 auto 25px;
    display: flex; align-items: center; justify-content: center;
}

.opp-card h4 { font-size: 24px; font-weight: 700; color: #0b1c3d; margin-bottom: 18px; text-transform: none;}
.opp-card p { font-size: 15px; color: #5a6b8a; line-height: 1.8; margin-bottom: 30px; min-height: 80px; }

.opp-btn {
    display: inline-block;
    padding: 12px 28px;
    border: 1.5px solid #f6923d;
    color: #f6923d;
    font-weight: 700;
    font-size: 13px;
    border-radius: 30px;
    text-transform: uppercase;
    transition: 0.3s;
    text-decoration: none;
}

.opp-btn:hover { background: #f6923d; color: #fff !important; }

/* --- 4. OVERLAY (MODAL) SYSTEM --- */
.drl-overlay {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(7, 20, 43, 0.85);
    backdrop-filter: blur(8px);
    animation: fadeIn 0.3s ease;
}

.drl-overlay-content {
    background-color: #fcfcfc;
    margin: 3% auto;
    padding: 50px;
    width: 95%;
    max-width: 1100px; /* Wider for 2-column grid */
    border-radius: 20px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    animation: slideUp 0.4s ease;
}

.close-overlay {
    position: absolute; right: 25px; top: 20px;
    font-size: 35px; background: none; border: none; color: #999; cursor: pointer;
}

/* --- 5. JOB GRID INSIDE OVERLAY (As per your Image) --- */
.job-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Columns */
    gap: 25px;
    margin-top: 40px;
}

.job-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    gap: 20px;
    transition: all 0.3s ease;
}

.job-card:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-color: #f6923d;
}

.job-img-side { width: 160px; height: 160px; flex-shrink: 0; }
.job-img-side img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }

.job-info-side { flex: 1; display: flex; flex-direction: column; }
.job-info-side h5 { font-size: 18px; font-weight: 700; color: #0b1c3d; margin: 0 0 5px 0; text-transform: none; }
.posted-date { font-size: 12px; color: #888; margin-bottom: 12px; display: block; }

.tags-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
.tag { font-size: 11px; color: #555; border: 1px solid #ddd; padding: 3px 10px; border-radius: 6px; background: #fdfdfd; }

.job-description {
    font-size: 13px; color: #666; line-height: 1.5; margin-bottom: 15px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.job-apply-now {
    margin-top: auto;
    align-self: flex-end;
    color: #f6923d !important;
    font-weight: 700; font-size: 14px;
    text-decoration: none; transition: 0.3s;
}

.job-apply-now i { margin-left: 5px; transition: 0.3s; }
.job-apply-now:hover { color: #d73e4d !important; }
.job-apply-now:hover i { transform: translateX(5px); }

/* --- 6. UTILITIES & ANIMATIONS --- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

#careers, #internship, #training { scroll-margin-top: 130px; }
.drl-main-footer { margin-top: 0 !important; }

/* --- 7. RESPONSIVE --- */
@media (max-width: 991px) {
    .job-grid { grid-template-columns: 1fr; }
    .opp-hub-section h2 { font-size: 32px; }
}

@media (max-width: 576px) {
    .job-card { flex-direction: column; }
    .job-img-side { width: 100%; height: 180px; }
    .job-apply-now { align-self: flex-start; }
    .drl-overlay-content { padding: 30px 15px; }
}

/* --- Modal Resume Invite Box --- */
/* --- Modal Resume Invite Box (Perfectly Centered) --- */
.modal-resume-invite {
    width: 100%; /* Spans across the modal */
    text-align: center; /* Centers the text and inline links */
    margin: 50px auto 20px auto; /* Centers the box itself */
    padding: 30px 20px;
    background: rgba(246, 146, 61, 0.03); 
    border-radius: 15px;
    border: 1.5px dashed rgba(246, 146, 61, 0.3);
    box-sizing: border-box; /* Prevents padding from breaking width */
    clear: both; /* Ensures it sits below the grid columns */
}

.modal-resume-invite p {
    margin: 0 auto;
    font-size: 15px;
    color: #5a6b8a;
    line-height: 1.6;
    max-width: 600px; /* Keeps text readable and centered */
}

.modal-resume-invite i {
    color: #f6923d;
    display: block; /* Moves icon to its own line for a cleaner look */
    font-size: 24px;
    margin-bottom: 10px;
}

.modal-resume-invite a {
    color: #f6923d;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid rgba(246, 146, 61, 0.2);
    transition: all 0.3s ease;
}

.modal-resume-invite a:hover {
    color: #0b1c3d;
    border-bottom-color: #0b1c3d;
}