/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." *
   /* Deep Tech Dark Theme */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #0b0f19;
    color: #e2e8f0;
    line-height: 1.7;
     font-family: 'Poppins', sans-serif;
}

.container {
    width: 92%;
    max-width: 1100px;
    margin: 0 auto;
}

/* Header & Profile Styling */
header {
    background: linear-gradient(135deg, #0f172a 0%, #1e1e38 100%);
    color: white;
    padding: 40px 0;
    border-bottom: 3px solid #00f2fe;
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.profile-area {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #00f2fe;
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.4);
}

header h1 {
    font-size: 2.5rem;
    font-weight: 700;
}

.subtitle {
    font-size: 1.1rem;
    color: #00f2fe;
}

.contact-quick {
    font-size: 0.95rem;
    color: #94a3b8;
    background: rgba(255,255,255,0.05);
    padding: 10px 15px;
    border-radius: 8px;
}

/* Layout */
.main-layout {
    display: flex;
    gap: 30px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.left-col { flex: 1; }
.right-col { flex: 2; }

.card {
    background: #111827;
    padding: 25px;
    margin-bottom: 25px;
    border-radius: 12px;
    border: 1px solid #1f293d;
}

.card h2 {
    color: #ffffff;
    font-size: 1.3rem;
    margin-bottom: 15px;
    border-bottom: 2px solid #1f293d;
    padding-bottom: 5px;
}

/* Personal Info List */
.personal-info-list {
    list-style: none;
}

.personal-info-list li {
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: #cbd5e1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    padding-bottom: 5px;
}

.personal-info-list strong {
    color: #00f2fe;
}

/* Languages Tags */
.lang-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.lang-tag {
    background-color: #1e293b;
    color: #6ee7b7;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    border: 1px solid rgba(110, 231, 183, 0.2);
}

/* Course List */
.course-list {
    list-style: none;
}
.course-list li {
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: #cbd5e1;
}

/* Table */
.table-responsive { overflow-x: auto; }
.marks-table {
    width: 100%;
    border-collapse: collapse;
}
.marks-table th, .marks-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #1f293d;
}
.marks-table th {
    background-color: #1f293d;
    color: #00f2fe;
}
.mark-highlight {
    background-color: rgba(0, 242, 254, 0.1);
    color: #00f2fe;
    padding: 3px 8px;
    border-radius: 4px;
}

/* Badges & Projects */
.skills-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.badge {
    background-color: #1e293b;
    color: #cbd5e1;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    border: 1px solid #334155;
}
.project-item {
    padding: 15px;
    background: #1e293b;
    border-left: 4px solid #00f2fe;
    border-radius: 0 8px 8px 0;
}

/* Certifications View Style */
.interaction-box { background: linear-gradient(135deg, #111827 0%, #1e1b4b 100%); }
button {
    background: linear-gradient(90deg, #00f2fe 0%, #4facfe 100%);
    color: #0b0f19;
    border: none;
    padding: 12px 24px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
}
button:hover { box-shadow: 0 0 15px rgba(0, 242, 254, 0.6); }

.hidden { display: none; }
.status-box {
    margin-top: 20px;
    padding: 15px;
    background: #0f172a;
    border-radius: 8px;
    border: 1px solid #1f293d;
}
.cert-download-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #1f293d;
}
.cert-download-item:last-child { border-bottom: none; }

.view-link {
    color: #00f2fe;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid #00f2fe;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    transition: all 0.3s;
}
.view-link:hover {
    background-color: #00f2fe;
    color: #0b0f19;
}

footer {
    text-align: center;
    padding: 25px;
    background-color: #090d16;
    color: #64748b;
    margin-top: 40px;
}

@media (max-width: 768px) {
    .main-layout { flex-direction: column; }
    .header-flex { flex-direction: column; text-align: center; }
    .profile-area { flex-direction: column; }
}