@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Playfair+Display:wght@400;600;700;800&display=swap");

      :root {
        --bg: #f6f7f8;
        --surface: #ffffff;

        --sidebar-bg: #0f2e2b;
        --sidebar-text: rgba(255, 255, 255, 0.9);
        --sidebar-accent: rgba(255, 255, 255, 0.9);

        --text: #1f2327;
        --text-muted: #5b6470;
        --heading: #111418;

        --accent: #1f4a44;
        --accent-soft: rgba(31, 74, 68, 0.12);
        --accent-warm: #7a2e2e;

        --border: rgba(31, 35, 39, 0.14);
        --shadow: rgba(0, 0, 0, 0.10);

        --tag-bg: rgba(31, 35, 39, 0.06);
        --tag-text: #1f2327;

        --card-hover: rgba(31, 74, 68, 0.06);

        --gradient-start: #163a35;
        --gradient-end: #0f2e2b;

        /* Contact button — change these to restyle the mobile CONTACT button */
        --contact-btn-bg: #0f2e2b;
        --contact-btn-bg-hover: #163a35;
        --contact-btn-color: #ffffff;
        --contact-btn-border: #163a35;
        --contact-btn-border-hover: #0f2e2b;
        --contact-btn-radius: 12px;
        --contact-btn-font-size: 0.82em;
        --contact-btn-font-weight: 800;
        --contact-btn-padding: 10px 14px;
        --contact-btn-letter-spacing: 0.6px;
      }

      body.dark-mode {
        --bg: #0b1f1d;
        --surface: #0b1f1d;

        --sidebar-bg: #0f2e2b;
        --sidebar-text: rgba(255, 255, 255, 0.92);
        --sidebar-accent: #ffffff;

        --text: #ffffff;
        --text-muted: rgba(255, 255, 255, 0.55);
        --heading: #ffffff;

        --accent: #5b6470;
        --accent-soft: rgba(31, 74, 68, 0.14);
        --accent-warm: #7a2e2e;

        --border: rgba(255, 255, 255, 0.18);
        --shadow: rgba(0, 0, 0, 0.45);

        --tag-bg: rgba(255, 255, 255, 0.08);
        --tag-text: #ffffff;

        --card-hover: rgba(255, 255, 255, 0.06);

        --gradient-start: #163a35;
        --gradient-end: #0b1f1d;
      }

      * { margin: 0; padding: 0; box-sizing: border-box; }

      body {
        font-family: "DM Sans", sans-serif;
        line-height: 1.65;
        background-color: var(--bg);
        color: var(--text);
        transition: background-color 0.4s, color 0.4s;
      }

      /* ── Controls Bar ── */
      .controls {
        position: sticky;
        top: 0;
        z-index: 100;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 24px;
        background: rgba(255, 255, 255, 0.80);
        border-bottom: 1px solid var(--border);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
      }

      .bar-group {
        display: flex;
        align-items: center;
        gap: 5px;
      }
      body.dark-mode .controls { background: rgba(11, 31, 29, 0.80); }

      .pdf-download-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: "DM Sans", sans-serif;
        font-size: 0.82em;
        font-weight: 700;
        color: #ffffff;
        background: var(--accent, #1f4a44);
        border: none;
        border-radius: 8px;
        padding: 0 16px;
        height: 34px;
        box-sizing: border-box;
        cursor: pointer;
        text-decoration: none;
        transition: opacity 0.2s;
        white-space: nowrap;
      }
      .pdf-download-btn:hover { opacity: 0.85; }
      .btn-label-mobile { display: none; }

      .controls button,
      .mode-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-family: "DM Sans", sans-serif;
        background: transparent;
        color: var(--text);
        border: 1px solid var(--border);
        padding: 0 16px;
        height: 34px;
        box-sizing: border-box;
        border-radius: 8px;
        cursor: pointer;
        font-size: 0.82em;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        transition: all 0.25s;
      }

      .controls button.active {
        background: rgba(31, 74, 68, 0.28);
        border-color: rgba(31, 74, 68, 0.55);
        box-shadow: none;
        transform: translateY(-1px);
      }
      @media (hover: hover) {
        .controls button:hover,
        .mode-toggle:hover {
          background: rgba(31, 74, 68, 0.28);
          border-color: rgba(31, 74, 68, 0.55);
          box-shadow: none;
          transform: translateY(-1px);
        }
      }


      .home-btn{
        display:inline-flex;
        align-items:center;
        gap:6px;
        font-family:"DM Sans",sans-serif;
        background:transparent;
        color:var(--text);
        border:1px solid var(--border);
        padding:0 16px;
        height:34px;
        box-sizing:border-box;
        border-radius:8px;
        cursor:pointer;
        font-size:0.82em;
        font-weight:600;
        letter-spacing:0.5px;
        text-transform:uppercase;
        transition:all 0.25s;
        text-decoration:none;
      }
      @media (hover: hover) {
        .home-btn:hover{
          background: rgba(31, 74, 68, 0.28);
          border-color: rgba(31, 74, 68, 0.55);
          transform: translateY(-1px);
        }
      }

      .bar-group:first-child { flex: 1; justify-content: flex-start; }
      .bar-group:last-child  { flex: 1; display: flex; justify-content: flex-end; }


      /* ── Resume Layout ── */
      .resume-wrapper {
        display: flex;
        max-width: 1240px;
        margin: 0 auto;
        background: var(--surface);
        min-height: 100vh;
        border-left: 1px solid var(--border);
        border-right: 1px solid var(--border);
      }

      /* ── Sidebar ── */
      .sidebar {
        width: 310px;
        flex-shrink: 0;
        background: var(--sidebar-bg);
        color: var(--sidebar-text);
        padding: 36px 28px;
        position: relative;
      }

      body.dark-mode .sidebar {
        background: #0f0f0f;
        border-right: 1px solid #1a1a1a;
      }

      .sidebar::after {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 200px;
        background: linear-gradient(180deg, rgba(33, 178, 166, 0.10) 0%, transparent 100%);
        pointer-events: none;
      }

      .profile-pic {
        width: 180px;
        height: 180px;
        border-radius: 16px;
        display: block;
        margin: 0 auto 28px;
        object-fit: cover;
        border: 3px solid rgba(33, 178, 166, 0.35);
        position: relative;
        z-index: 1;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s, box-shadow 0.3s;
      }

      .profile-pic:hover {
        transform: scale(1.03);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
      }

      .sidebar h2 {
        font-family: "Playfair Display", serif;
        font-size: 1.1em;
        font-weight: 600;
        color: var(--sidebar-accent);
        margin: 28px 0 14px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
        position: relative;
        z-index: 1;
        letter-spacing: 0.3px;
      }

      .sidebar h2 i { margin-right: 8px; font-size: 0.9em; }

      .sidebar h4 {
        color: rgba(232, 230, 225, 0.7);
        font-size: 0.78em;
        font-weight: 600;
        margin: 16px 0 8px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        position: relative;
        z-index: 1;
      }

      body.dark-mode .sidebar h4 { color: rgba(212, 212, 212, 0.5); }

      .contact-item {
        margin-bottom: 10px;
        font-size: 0.88em;
        display: flex;
        align-items: center;
        position: relative;
        z-index: 1;
      }

      .contact-item i {
        width: 18px;
        margin-right: 10px;
        color: var(--sidebar-accent);
        text-align: center;
        font-size: 0.85em;
      }

      .contact-item a {
        color: var(--sidebar-text);
        text-decoration: none;
        transition: color 0.2s;
        word-break: break-word;
      }

      .contact-item a:hover { color: var(--sidebar-accent); }

      .skills-list {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        padding: 0;
        list-style: none;
        position: relative;
        z-index: 1;
      }

      .skills-list li {
        background: rgba(255, 255, 255, 0.06);
        color: var(--sidebar-text);
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 0.78em;
        font-weight: 400;
        border: 1px solid rgba(255, 255, 255, 0.04);
        transition: all 0.25s;
      }

      body.dark-mode .skills-list li {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.06);
      }

      .skills-list li:hover {
        background: var(--sidebar-accent);
        color: var(--sidebar-bg);
        transform: translateY(-1px);
      }

      .skills-list li.highlight {
        background: rgba(100, 181, 246, 0.12);
        border-color: rgba(100, 181, 246, 0.25);
        font-weight: 500;
      }

      body.dark-mode .skills-list li.highlight {
        background: rgba(31, 74, 68, 0.35);
        border-color: rgba(31, 74, 68, 0.6);
        color: #ffffff;
      }

      .languages { position: relative; z-index: 1; }
      .languages p { margin: 4px 0; font-size: 0.88em; }

      /* ── Main Content ── */
      .main-content {
        flex-grow: 1;
        padding: 40px 48px;
        position: relative;
      }

      .main-content h1 {
        font-family: "Playfair Display", serif;
        font-size: 2.6em;
        font-weight: 800;
        color: var(--heading);
        letter-spacing: -0.5px;
        line-height: 1.15;
      }

      .data-badge {
        display: inline-block;
        background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
        color: #fff;
        font-family: "DM Sans", sans-serif;
        font-size: 0.35em;
        font-weight: 700;
        padding: 5px 12px;
        border-radius: 6px;
        vertical-align: middle;
        margin-left: 12px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
      }

      .badge-block{
        margin: 10px 0 14px;
        font-size: 0.8em;
        display: inline-block;
      }

      .subtitle {
        font-size: 1.05em;
        color: var(--text-muted);
        margin: 8px 0 14px;
        font-weight: 400;
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
      }

      .subtitle-item { display: flex; align-items: center; }
      .subtitle-item i { margin-right: 6px; font-size: 0.85em; color: var(--accent); }

      /* Contact button: hidden by default (desktop), shown only in mobile via media query */
      .about-btn {
        display: none;
        margin: 8px 0 24px;
        padding: var(--contact-btn-padding);
        border-radius: var(--contact-btn-radius);
        border: 1px solid var(--contact-btn-border);
        color: var(--contact-btn-color);
        text-decoration: none;
        font-weight: var(--contact-btn-font-weight);
        letter-spacing: var(--contact-btn-letter-spacing);
        text-transform: uppercase;
        font-size: var(--contact-btn-font-size);
        background: var(--contact-btn-bg);
      }

      .about-btn:hover {
        background: var(--contact-btn-bg-hover);
        border-color: var(--contact-btn-border-hover);
      }

      /* Override .main-content a which has higher specificity */
      .main-content .about-btn,
      .main-content .about-btn:hover {
        color: var(--contact-btn-color);
        border-bottom-color: transparent;
      }

      .main-content h2 {
        font-family: "Playfair Display", serif;
        font-size: 1.45em;
        font-weight: 700;
        color: var(--heading);
        margin: 36px 0 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--accent);
        display: flex;
        align-items: center;
      }

      .main-content h2 i { margin-right: 10px; color: var(--accent); font-size: 0.85em; }

      .main-content h3 {
        font-size: 1.1em;
        font-weight: 600;
        color: var(--heading);
        margin-bottom: 4px;
      }

      .main-content p { margin-bottom: 14px; }

      .main-content ul { list-style: none; padding-left: 0; }
      .main-content li {
        margin-bottom: 8px;
        position: relative;
        padding-left: 22px;
        font-size: 0.94em;
      }

      .main-content li::before {
        content: "▸";
        position: absolute;
        left: 0; top: 0;
        color: var(--accent);
        font-weight: 700;
      }

      .main-content a {
        color: var(--accent);
        text-decoration: none;
        font-weight: 500;
        border-bottom: 1px solid transparent;
        transition: border-color 0.2s;
      }
      .main-content a:hover { border-bottom-color: var(--accent); }

      /* ── Cards ── */
      .job, .education-entry, .project {
        margin-bottom: 20px;
        padding: 18px 20px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: transparent;
        transition: all 0.3s;
      }

      .job:hover, .education-entry:hover, .project:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px var(--shadow);
        background: var(--card-hover);
      }

      .job-title, .degree {
        font-weight: 700;
        font-size: 1.05em;
        color: var(--heading);
      }

      .company, .institution {
        font-weight: 500;
        color: var(--accent);
        margin-bottom: 3px;
        font-size: 0.95em;
      }

      .date-location {
        font-size: 0.84em;
        color: var(--text-muted);
        margin-bottom: 8px;
      }

      /* ── Certs Grid ── */
      .cert-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 10px;
      }

      .cert-item {
        background: transparent;
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 12px 16px;
        transition: all 0.25s;
      }

      .cert-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px var(--shadow);
        border-color: var(--accent);
        background: var(--card-hover);
      }

      .cert-item .cert-label {
        display: flex;
        align-items: center;
        font-size: 0.9em;
        font-weight: 500;
        color: var(--heading);
      }

      .cert-item i {
        margin-right: 10px;
        color: var(--accent);
        font-size: 1.1em;
        width: 20px;
        text-align: center;
      }

      /* ── Projects ── */
      .project.ml-project {
        border-left: 3px solid var(--accent);
        background: var(--accent-soft);
      }
      body.dark-mode .project.ml-project { background: rgba(100, 181, 246, 0.04); }
      .project.ml-project h3 { color: var(--accent); }

      /* ── Summary box ── */
      .summary p {
        font-size: 0.97em;
        line-height: 1.75;
        color: var(--text);
        background: var(--accent-soft);
        padding: 20px 24px;
        border-radius: 10px;
        border-left: 4px solid var(--accent);
      }

      .section.summary p {
        text-align: justify;
        text-justify: inter-word;
      }

      /* ── Awards layout ── */
      .awards-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)) !important; }
      .awards-grid .cert-item.featured { grid-column: 1 / -1; }
      .awards-grid .award-subtitle, .awards-grid .award-desc {
        margin: 6px 0 0 30px;
        font-size: 0.85em;
        color: var(--text-muted);
      }
      .awards-grid .award-desc { margin-top: 6px; color: var(--text); }

      /* ── Smooth reveal (fixed) ── */
      .section {
        opacity: 0;
        transform: translateY(16px);
        animation: fadeUp 0.5s forwards;
        animation-delay: var(--delay, 0.1s);
      }
      @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

      /* ── Collapsible sections ── */
      .main-content h2 {
        cursor: pointer;
        user-select: none;
      }

      .section-chevron {
        font-size: 0.65em;
        opacity: 0.45;
        transition: transform 0.3s ease, opacity 0.2s ease;
        flex-shrink: 0;
        margin-left: auto;
        padding-left: 10px;
      }

      .main-content h2:hover .section-chevron { opacity: 0.8; }

      .section.collapsed .section-chevron { transform: rotate(-90deg); }

      .section-body {
        overflow: hidden;
        transition: height 0.35s ease, opacity 0.3s ease;
      }

      .section.collapsed .section-body { opacity: 0; }

      /* ── Responsive ── */
      @media (max-width: 992px) {
        .resume-wrapper { flex-direction: column; border: none; }
        .sidebar { width: 100%; padding: 24px 20px; }
        .main-content { padding: 24px 20px; }
        .profile-pic { width: 110px; height: 110px; }
      }

      @media (max-width: 600px){
        .controls{
          padding: 10px 12px;
        }
        .bar-group{
          gap: 4px;
        }
        .controls button,
        .mode-toggle,
        .home-btn,
        .pdf-download-btn{
          padding: 0 10px;
          height: 30px;
          font-size: 0.75em;
        }
        .btn-label{
          display: none;
        }
        .btn-label-mobile{
          display: inline;
        }
      }

      @media (max-width: 900px){
        .awards-grid{
          grid-template-columns: 1fr !important;
        }
        .awards-grid .cert-item.featured{
          grid-column: auto;
        }
      }

      .resume-wrapper{
        overflow-x: hidden;
      }
      .main-content, .cert-item, .job, .project{
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      /* Hero container */
      .hero {
        margin-bottom: 28px;
      }

      /* Web/mobile behavior:
        - sidebar hidden
        - about button shown
        - hero centered
      */
      @media (max-width: 1100px){
        .sidebar{ display:none; }
        .resume-wrapper{ flex-direction: column; }

        .hero{ text-align:center; }
        .hero .subtitle{ justify-content:center; }
        .hero .badge-block{ display:block; margin: 10px auto 16px; }
        .hero .about-btn{
          display:inline-block;
          margin-left:auto;
          margin-right:auto;
        }
      }