/* ================================================
   PORTFOLIO — MODERN REDESIGN
   ================================================ */

/* Design tokens */
:root {
  --clr-primary:    #6366f1;
  --clr-accent:     #06b6d4;
  --clr-grad:       linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
  --clr-grad-rev:   linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
  --clr-sidebar-a:  #0f172a;
  --clr-sidebar-b:  #1e1b4b;
  --clr-body-bg:    #f1f5f9;
  --clr-card:       #ffffff;
  --clr-text:       #1e293b;
  --clr-muted:      #64748b;
  --shadow-card:    0 4px 24px rgba(99, 102, 241, 0.10);
  --shadow-hover:   0 14px 44px rgba(99, 102, 241, 0.22);
  --radius:         14px;
  --ease:           all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------
   BASE
   ------------------------------------------------ */
body {
  background-color: var(--clr-body-bg) !important;
  color: var(--clr-text) !important;
  font-family: 'Poppins', 'Muli', sans-serif !important;
}

::selection {
  background: rgba(99, 102, 241, 0.22);
  color: var(--clr-text);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--clr-body-bg); }
::-webkit-scrollbar-thumb {
  background: var(--clr-grad);
  border-radius: 4px;
}

/* ------------------------------------------------
   TYPOGRAPHY
   ------------------------------------------------ */
h1, .h1, h2, .h2, h3, .h3,
h4, .h4, h5, .h5, h6, .h6 {
  color: var(--clr-text);
  text-transform: uppercase;
}

h1, .h1 { line-height: 1.05; }

p.lead {
  font-size: 1.08rem;
  font-weight: 400;
  color: var(--clr-muted);
  line-height: 1.9;
}

/* Section heading with gradient underline */
h2.mb-5 {
  position: relative;
  padding-bottom: 0.85rem;
  color: var(--clr-text);
}
h2.mb-5::after {
  content: '';
  position: absolute;
  bottom: 0.3rem;
  left: 0;
  width: 56px;
  height: 4px;
  border-radius: 4px;
  background: var(--clr-grad);
}

/* Gradient subheading */
.subheading {
  font-family: 'Saira Extra Condensed', sans-serif !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  font-size: 1.25rem !important;
  background: var(--clr-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Dividers */
hr.m-0 {
  border-color: rgba(99, 102, 241, 0.12);
  opacity: 1;
}

/* ------------------------------------------------
   SIDEBAR
   ------------------------------------------------ */
#sideNav {
  background: linear-gradient(175deg, var(--clr-sidebar-a) 0%, var(--clr-sidebar-b) 100%) !important;
}

#sideNav .navbar-nav .nav-item .nav-link {
  font-weight: 600;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6) !important;
  border-left: 3px solid transparent;
  padding: 0.55rem 1.2rem;
  transition: var(--ease);
}

#sideNav .navbar-nav .nav-item .nav-link:hover {
  color: #fff !important;
  border-left-color: var(--clr-accent);
  padding-left: 1.7rem;
  background: rgba(255, 255, 255, 0.07);
}

#sideNav .navbar-toggler:focus {
  outline-color: var(--clr-accent);
}

@media (min-width: 992px) {
  #sideNav {
    box-shadow: 6px 0 32px rgba(0, 0, 0, 0.38);
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 17rem;
    height: 100vh;
  }

  #sideNav .navbar-brand {
    display: flex;
    margin: auto auto 0;
    padding: 0.75rem;
  }

  #sideNav .navbar-brand .img-profile {
    max-width: 9.5rem;
    max-height: 9.5rem;
    border: none !important;
    padding: 4px;
    background: var(--clr-grad);
    border-radius: 50%;
    box-shadow:
      0 0 0 5px rgba(99, 102, 241, 0.3),
      0 0 40px rgba(99, 102, 241, 0.55),
      0 0 80px rgba(6, 182, 212, 0.3);
    animation: profileGlow 3.5s ease-in-out infinite alternate;
  }

  @keyframes profileGlow {
    from {
      box-shadow:
        0 0 0 4px rgba(99, 102, 241, 0.25),
        0 0 28px rgba(99, 102, 241, 0.4),
        0 0 55px rgba(6, 182, 212, 0.2);
    }
    to {
      box-shadow:
        0 0 0 7px rgba(99, 102, 241, 0.45),
        0 0 55px rgba(99, 102, 241, 0.7),
        0 0 100px rgba(6, 182, 212, 0.45);
    }
  }

  #sideNav .navbar-collapse {
    display: flex;
    align-items: flex-start;
    flex-grow: 0;
    width: 100%;
    margin-bottom: auto;
  }

  #sideNav .navbar-collapse .navbar-nav {
    flex-direction: column;
    width: 100%;
  }

  #sideNav .navbar-collapse .navbar-nav .nav-item { display: block; }
  #sideNav .navbar-collapse .navbar-nav .nav-item .nav-link { display: block; }
}

/* ------------------------------------------------
   ABOUT SECTION
   ------------------------------------------------ */
#about h1 {
  font-size: clamp(2.4rem, 5vw, 4.5rem);
}

/* Gradient on last-name span */
#about h1 .text-primary {
  background: var(--clr-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#about .mb-5 a {
  color: var(--clr-primary);
  font-weight: 600;
  text-decoration: none;
}
#about .mb-5 a:hover { text-decoration: underline; }

/* ------------------------------------------------
   SOCIAL ICONS
   ------------------------------------------------ */
.social-icons .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.1rem;
  width: 3.1rem;
  background: var(--clr-grad) !important;
  color: #fff !important;
  border-radius: 50%;
  font-size: 1.25rem;
  margin-right: 0.9rem;
  transition: var(--ease);
  box-shadow: 0 4px 18px rgba(99, 102, 241, 0.35);
}
.social-icons .social-icon:last-child { margin-right: 0; }
.social-icons .social-icon:hover {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.5);
  color: #fff !important;
}

/* Resume download button */
#about a[download] button {
  width: auto !important;
  height: auto !important;
  margin-top: 2rem !important;
  padding: 0.72rem 2.2rem !important;
  font: 600 0.95rem 'Poppins', sans-serif !important;
  letter-spacing: 0.05rem !important;
  border: none !important;
  border-radius: 50px !important;
  background: var(--clr-grad) !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: var(--ease) !important;
  box-shadow: 0 4px 22px rgba(99, 102, 241, 0.45) !important;
}
#about a[download] button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 32px rgba(99, 102, 241, 0.6) !important;
}

/* ------------------------------------------------
   EXPERIENCE / PROJECT / EDUCATION CARDS
   ------------------------------------------------ */
#experience .d-flex.justify-content-between,
#education .d-flex.justify-content-between,
#project   .d-flex.justify-content-between {
  background: var(--clr-card);
  border-radius: var(--radius);
  padding: 1.65rem 1.85rem;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: var(--ease);
}

/* Left accent bar */
#experience .d-flex.justify-content-between::before,
#project    .d-flex.justify-content-between::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--clr-grad);
  border-radius: var(--radius) 0 0 var(--radius);
}
#education .d-flex.justify-content-between::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--clr-grad-rev);
  border-radius: var(--radius) 0 0 var(--radius);
}

/* Top-right decorative corner */
#experience .d-flex.justify-content-between::after,
#project    .d-flex.justify-content-between::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 68px; height: 68px;
  background: linear-gradient(225deg, rgba(99, 102, 241, 0.07), transparent);
  border-radius: 0 var(--radius) 0 68px;
  pointer-events: none;
}

/* Hover lift */
#experience .d-flex.justify-content-between:hover,
#education  .d-flex.justify-content-between:hover,
#project    .d-flex.justify-content-between:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* Card inner text */
#experience h3, #project h3, #education h3 {
  font-size: 1.12rem;
  color: var(--clr-text);
  margin-bottom: 0.2rem;
}
#experience p, #project p, #education p {
  color: var(--clr-muted);
  font-size: 0.92rem;
  line-height: 1.75;
  margin-bottom: 0.4rem;
}

/* Date pill badge */
.flex-shrink-0 .text-primary {
  display: inline-block !important;
  padding: 0.28rem 0.85rem !important;
  border-radius: 50px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(6,182,212,0.1)) !important;
  color: var(--clr-primary) !important;
  border: 1px solid rgba(99, 102, 241, 0.22) !important;
  white-space: nowrap;
}

/* ------------------------------------------------
   SKILLS
   ------------------------------------------------ */
.dev-icons { font-size: 2.75rem; line-height: 2; }

.dev-icons .list-inline-item {
  color: var(--clr-text);
  margin: 0.3rem 0.5rem;
  transition: var(--ease);
  cursor: default;
}
.dev-icons .list-inline-item:hover {
  color: var(--clr-primary);
  transform: translateY(-6px) scale(1.15);
  filter: drop-shadow(0 6px 12px rgba(99, 102, 241, 0.5));
}

/* fa-ul lists generic */
.fa-ul { margin-left: 1.6rem !important; }
.fa-ul li { color: var(--clr-muted); font-size: 0.94rem; padding: 0.35rem 0; }
.fa-li { color: var(--clr-primary) !important; }

/* Power Platform & AI — pill tag style (list with mb-4 class) */
#skills ul.fa-ul.mb-4 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-left: 0 !important;
  margin-left: 0 !important;
  list-style: none;
}
#skills ul.fa-ul.mb-4 li {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.95rem !important;
  background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(6,182,212,0.08));
  border: 1px solid rgba(99, 102, 241, 0.2);
  color: var(--clr-primary) !important;
  border-radius: 50px;
  font-size: 0.82rem !important;
  font-weight: 600;
  transition: var(--ease);
  cursor: default;
}
#skills ul.fa-ul.mb-4 li:hover {
  background: var(--clr-grad);
  color: #fff !important;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}
#skills ul.fa-ul.mb-4 li .fa-li { display: none; }

/* Workflow checklist */
#skills ul.fa-ul.mb-0:not(.mb-4) li {
  display: flex;
  align-items: center;
  padding: 0.45rem 0 !important;
  border-bottom: 1px dashed rgba(99, 102, 241, 0.1);
  font-size: 0.95rem !important;
  background: none;
  border-radius: 0;
}
#skills ul.fa-ul.mb-0:not(.mb-4) li:last-child { border-bottom: none; }

/* ------------------------------------------------
   AWARDS & CERTIFICATIONS
   ------------------------------------------------ */
#awards .fa-ul li,
#responsibility .fa-ul li {
  display: flex !important;
  align-items: flex-start;
  padding: 0.5rem 0 !important;
  border-bottom: 1px dashed rgba(99, 102, 241, 0.1);
  font-size: 0.94rem !important;
  color: var(--clr-muted) !important;
  background: none !important;
  border-radius: 0 !important;
}
#awards .fa-ul li:last-child,
#responsibility .fa-ul li:last-child { border-bottom: none; }

#awards .fa-li .fa-trophy { color: #f59e0b !important; }
#responsibility .fa-li     { color: var(--clr-accent) !important; }

/* ------------------------------------------------
   INTERESTS
   ------------------------------------------------ */
#interests p { color: var(--clr-muted); line-height: 1.85; }

/* ------------------------------------------------
   SECTIONS LAYOUT (preserved from original)
   ------------------------------------------------ */
section.resume-section {
  display: flex;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 5rem;
  padding-bottom: 5rem;
  max-width: 75rem;
}
section.resume-section .resume-section-content { width: 100%; }

/* Subtle alternating background */
section.resume-section:nth-of-type(even) {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
}

@media (min-width: 768px) {
  section.resume-section { min-height: 100vh; }
}

@media (min-width: 992px) {
  section.resume-section {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

/* ------------------------------------------------
   FADE-IN ENTRANCE ANIMATIONS
   ------------------------------------------------ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.resume-section-content > h1,
.resume-section-content > h2,
.resume-section-content > .d-flex {
  animation: fadeUp 0.55s ease both;
}