* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

:root{
    --bg: rgb(9,4,42);
    --card-bg: rgb(176,173,239);
    --accent: rgb(118,112,222);
    --muted: #f5f6fa;
}

body {
    background-color: var(--bg);
    color: #0b0b0b;
    -webkit-font-smoothing:antialiased;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.25rem;
}

/* Header and Profile Section (mobile-first) */
.profile-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--card-bg);
    padding: 1rem;
    border-radius: 1rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 10px rgba(244,238,238,0.06);
    align-items: center;
}

.profile-image {
    flex: 0 0 140px;
    width: 140px;
}
.profile-image img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.profile-info {
    text-align: center;
}
.profile-info h1 {
    color: #2f0303;
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
}
.profile-info h2 {
    font-size: clamp(1.25rem, 4.5vw, 2.25rem);
    color: #0a0303;
    margin-bottom: 0.5rem;
}
.profile-info .title {
    font-size: clamp(0.95rem, 3vw, 1.15rem);
    color: #060505;
    margin-bottom: 0.5rem;
}
.profile-info .skills {
    color: #16044c;
    margin-bottom: 0.85rem;
}

.contact-info {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.contact-info a {
    color: #0a0e05;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.profile-links {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.btn {
    padding: 0.45rem 1rem;
    border: 1px solid var(--accent);
    border-radius: 999px;
    text-decoration: none;
    color: #040000;
    background-color: rgba(255,255,255,0.85);
    transition: transform 0.15s ease, background 0.15s ease;
    font-weight:600;
}
.btn:hover { transform: translateY(-2px); }

/* Projects Counter Section */
.projects-counter {
    background-color: rgb(203,203,225);
    padding: 0.75rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
}

.counter-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.counter-item { display:flex; align-items:center; gap:0.5rem; font-size:0.98rem; }

/* Bio + Skills Row */
.bio-skills-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}
.bio {
    background: var(--muted);
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 0 2px 10px rgba(44,62,80,0.04);
}
.bio h3 { margin-bottom:0.6rem; }
.bio p { line-height:1.6; color:#222; }

.skills-section {
    background: #eaf0fb;
    padding: 1rem;
    border-radius: 1rem;
}
.technical-skills { background: rgb(24,17,68); padding:0.6rem; border-radius:1rem; color:#fff; }
.technical-skills h3 { color:#e9cbcb; margin-bottom:0.5rem; }
.skills-grid { display:flex; gap:0.5rem; flex-wrap:wrap; }
.skill-tag { padding:0.35rem 0.8rem; border-radius:999px; background:#f8f9fe; color:#0b0909; font-size:0.9rem; }

/* Feature Projects Section */
.feature-projects { background-color: var(--card-bg); padding:1rem; border-radius:1rem; box-shadow:0 2px 10px rgba(0,0,0,0.06); }
.projects-grid { display:grid; grid-template-columns: 1fr; gap:1rem; margin-top:0.75rem; }
.all-projects-grid { margin-top:1rem; }

.project-card { background: rgb(156,152,232); border-radius:12px; overflow:hidden; border:2px solid var(--accent); display:flex; flex-direction:column; }
.project-card:hover { box-shadow:0 6px 18px rgba(0,0,0,0.12); }
.project-image { position:relative; width:100%; background:#ddd; display:flex; align-items:center; justify-content:center; }
.project-image { aspect-ratio: 16 / 9; }
.project-image img { width:100%; height:100%; object-fit:cover; display:block; }
.project-tags { position:absolute; top:12px; left:12px; display:flex; gap:8px; }
.tag { background:#fff; color:#333; border-radius:8px; padding:4px 10px; font-weight:600; }
.project-content { padding:1rem; display:flex; flex-direction:column; gap:0.5rem; }
.project-content h3 { font-size:1.05rem; }
.project-content p { font-size:0.95rem; color:#0d0c0c; }
.view-btn { background: rgb(3,20,58); color:#fff; border-radius:8px; padding:0.5rem 0.9rem; text-decoration:none; font-weight:600; width:max-content; }

/* EXPERIENCE SECTION */
.experience-section { background:#18192a; color:#fff; border-radius:1rem; margin-top:1.5rem; margin-bottom:1.5rem; padding:1.25rem; box-shadow:0 2px 10px rgba(0,0,0,0.08); }

/* Medium and large screens */
@media (min-width: 700px) {
    .container { padding:2rem; }
    .profile-section { flex-direction: row; align-items: center; text-align: left; }
    .profile-image { width:200px; flex:0 0 200px; }
    .profile-info { padding:0 0.5rem; }
    .bio-skills-row { flex-direction: row; gap:1.25rem; }
    .bio { flex:1 1 40%; }
    .skills-section { flex:1 1 60%; }
    .projects-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .projects-grid { grid-template-columns: repeat(3, 1fr); }
    .container { padding:2.5rem; }
}

/* Small tweaks for very small devices */
@media (max-width: 420px) {
    .profile-info h2 { font-size: 1.25rem; }
    .btn { padding: 0.4rem 0.8rem; }
}

/* Global responsive images and utilities */
img { max-width: 100%; height: auto; display: block; }

/* Modal styles */
.modal { display: none; position: fixed; z-index: 1000; inset: 0; background: rgba(0,0,0,0.35); align-items: center; justify-content: center; padding: 1rem; }
.modal[aria-hidden="false"] { display:flex; }
.modal-content { background:#fff; border-radius:16px; max-width:900px; width:100%; box-shadow:0 4px 32px rgba(0,0,0,0.18); position:relative; padding:1.25rem; }
.modal-scroll { max-height:70vh; overflow-y:auto; }
.close { position:absolute; top:12px; right:12px; font-size:1.6rem; background:transparent; border:none; cursor:pointer; }
.modal-project-details { margin-top:1.25rem; border-top:1px solid #eee; padding-top:1rem; }

@media (max-width:700px) {
    .modal-content { padding:0.75rem; }
}

/* Experience section styles */
.experience-section { background:#18192a; color:#fff; border-radius:1rem; margin-top:1.5rem; margin-bottom:1.5rem; padding:1.25rem; box-shadow:0 2px 10px rgba(0,0,0,0.08); }
.experience-section h2 { color:#ffd43b; font-size:1.6rem; font-weight:800; margin-bottom:1rem; letter-spacing:1px; }
.exp-item { margin-bottom:1rem; }
.exp-header { display:flex; align-items:center; gap:1rem; margin-bottom:0.5rem; }
.exp-logo { width:56px; height:56px; background:#ffd43b; border-radius:50%; object-fit:contain; }
.exp-company { font-size:1.05rem; font-weight:700; color:#46c6c4; }
.exp-company-accent { color:#ffd43b; }
.exp-list { margin-left:1.25rem; }
.exp-role { color:#ffd43b; font-weight:600; }
.exp-period { color:#fff; }
.exp-desc { color:#ccc; }